こわくて、こわくてたまりません。<p>でも、ゆうちゃんは「まけるもんか!」とあきらめませんでした。src="js/JS002_caterpillar01.js"></script></body></html>18行目のcanvas要素をJavaScriptによってコントロールしており、JavaScriptのコードはcanvas_stij.js、JS002_caterpillar01.jsの2つのファイルに記述してあります。使用するJavaScriptのファイルは、21、22行目で指定しており、また、記事の書式を指定するファイルstyle.cssについては6行目で指定しています。これをどのようにWordPressに移植すればよいのか・・・。主な疑問点は以下の通りです。WordPressのブロックエディタには、上記HTMLファイルをそのまま使えるのか。JSファイル、CSSファイルはどのように保存すればよいのか。使用するJSファイル、CSSファイルはどのように指定すればよいのか。JSファイル、CSSファイルを必要としない記事では、起動時間の遅延を防ぐためにファイルを読み込まない設定にできるのか。2.WordPressのブロックエディタへの記述では、まずWordPressのブロックエディタへの記述方法について説明します。実はHTMLファイルの内容をそのままコピペできれば楽なのですが、そのままというわけにはいきません。6、21、22行目で行ったCSSファイル、JSファイルの指定はブロックエディタ内ではできません。9行目から20行目の部分は、そのままHTMLブロックにコピペできます。9~20行目の中でカスタムHTMLブロックを用いて記入する必要があるのは上記コードの18行目のcanvas要素の部分だけです。残りの部分はWordPressのブロックエディタでも編集できます。楽な方法は9~20行目のうち、JavaScriptで操作するcanvas要素の部分(18行目)のみカスタムHTMLブロックを使い、残りはいつもどおりに記述する方法です。次にJSファイル、CSSファイルの保存先について説明します。私はレンタルサーバーはロリポップ、テーマはCocoonの子テーマを使っているので、その前提で話を進めますが、他の環境であっても設定の流れは同じです。結論として、JSファイル、CSSファイルの保存先は使用しているテーマ(子テーマ)のフォルダ内に保存するのが楽だと思います。」という関数を使って指定することができるからです。指定の具体的な方法は後述します。親テーマはテーマのバージョンアップのときに内容がクリアされてしまう可能性があるため、子テーマを使った方が無難です。ロリポップへのログインと保存先JSファイル、CSSファイルの保存はWordPressからは行えないため、レンタルサーバーにログインする必要があります。[ロリポップ!FTP]と進み、FTP機能を使います。[cocoon-chile-master]ですので、この中にJavaScriptファイルを保存するフォルダ「JS」、CSSファイルを保存するフォルダ「CSS」を作成します。フォルダの作成は「ロリポップ!FTP」では上部ツールバーのアイコンをクリックすることで操作可能です。ファイルを保存するフォルダ名は「JS」「CSS」でなくてもかまいません。先ほど作成した「フォルダJS」「フォルダCSS」に、「JavaScriptファイル」「CSSファイル」を保存してみましょう。保存は「ロリポップ!FTP」の機能を使って、自分のPCの中にあるファイルをアップロードしてもよいですし、サーバーの中にファイルを新規作成し、そのファイルにコードをコピペしてもかまいません。ファイルを新規作成する場合に拡張子は自動では設定されないので、拡張子の.jsや.cssを忘れないようにしましょう。4.JS、CSSファイルの指定WordPressに移植する前は、使用するJS、CSSファイルの指定をHTMLファイルで行っていましたが、WordPressでは使用テーマのfunctions.phpファイルの中で指定します。functions.phpの内容を編集するのは以下の2つの方法があります。[cocoon-chile-master]の中にありますので、「ロリポップ!FTP」で編集することが可能です。WordPressで編集functions.phpの編集はWordPressからも可能です。手順は以下の通りです。Child(自分が使用しているテーマ名)を選択。[functions.php]を選択。内容を変更し、下部の「ファイルの更新」ボタンをクリック。簡単な文法エラーチェックも行われますし、WordPressで編集した方が楽だと思います。functions.phpを編集する前に、念のため内容をbackupしておきましょう。5.functions.phpへの記述コード以下、私のfunctions.phpを紹介します。8~26行目が追加した部分であり、このように記述することで、それぞれの記事で必要なJSファイル、CSSファイルを指定することができます。このファイルで設定した記事は以下の2つの記事です。'add_script2');?>8と19行目の関数名や、17、26行目の引数の名前は設定ごとに変わりますので、うっかり同名にしないように注意しましょう。ファイルを読み込む記事の指定10行目の「is_single(array(3633))」では記事のid番号を指定しています。ここで指定したJS、CSSファイルは、このid番号の記事を表示するときだけ呼び出されます。「is_single()」は投稿ページを指定する場合の関数であり、固定ページを指定する場合には「is_page()」を使います。4208))」のように、id番号を列挙します。記事のid番号はそれぞれの記事の固有番号です。id番号を調べるには、WordPressの「投稿一覧」や「固定ページ一覧」の上部の[表示オプション]を開き、[id]の項目にチェックを入れます。すると、「投稿一覧」や「固定ページ一覧」にid番号が表示されるようになります。JSファイル、CSSファイルの指定JSファイルは「wp_enqueue_script()」によって読み込みます。CSSファイルは「wp_enqueue_style」によって読み込みます。具体的な内容は以下のリファレンスを参照してください。styleなお、関数の第2引数の「get_stylesheet_directory_uri().」の部分は、テーマ(子テーマ)のフォルダの位置を示す関数です。この関数を用いることでテーマまでの具体的な位置を記述する必要がなく、記述が簡潔になります。以下のようにif文の条件から「is_single()」を削除すると全てのページで使用可能なJSファイル、CSSファイルを指定することができます。3行目のif文の中の「!is_admin()」は、ダッシュボードや管理画面では、ファイルを読み込まないための記述です。管理画面でも使用するならばif文は不要となり、3、5行目は削除できます。共通で使用するファイルの指定」で説明した方法は、共通で指定したJSファイルと、個別で指定したJSファイルとの干渉に注意しなければなりません。アニメーション表示するためのrequestAnimationFrameなどの重複が原因で予期せぬエラーが発生する可能性があります。4208))」のように、if文の中でid番号を列挙する方法をお勧めします。共通の設定を変更したときに過去の記事が知らないうちにフリーズしてしまう恐れがありますし、共通の設定との重複を避けなければならないという制限が生じてしまうからです。6.JavaScriptのコード編集はどこでする?JavaScriptで記述したコードは例えばサーバーの「ロリポップ!FTP」を使ってサーバー上のコードを直接編集することが可能です。Codeとかを使った方が効率がいいので、結局、PCでJavaScriptの作成や修正を行い、WordPressやサーバーのファイルにコピペ(アップロード)という流れになるのではないでしょうか。最初はレンタルサーバーへのアップロードやfunctions.phpの変更のときに緊張するかもしれませんが、きちんとbackupを行っておけば怖くありません。レビューなど・Twitterへのリンクです。・2020年「光回線は値段で選ぶ」では後悔する・NURO光開通までWiFiルーターを格安レンタルできる・NURO光の屋外工事の状況をご紹介。冒険」JavaScriptの練習で簡単な絵本を作りました。絵が動くと「ほっこり」しますね。プログラミングの練習が目的だったのですが、なかなか、いい雰囲気の絵本になったのではないかと思います。した感じの表情をお楽しみください。)の自動計算を行い、入力条件、M、Q、変形、変形角の図を出力します。Chromeでは、「図の上で右クリック」>「名前を付けて画像を保存」「画像をコピー」で画像を利用できます。冒険」NURO光の屋外工事の状況をご紹介。ホームJavaScriptカテゴリーHTML3JavaScript3構造力学1Kotlin4Python63Pythonチュートリアル2Python用語集6ゆうちゃんとPython18数値解析5WordPress3ブログ開設8レビュー5NURO光5雑記2新着記事ネット上のNURO光紹介特典は個人情報がもれないの?2020.02.16光回線開通!実測するとNURO光はやっぱり速かった2020.02.112020.02.16NURO光の屋外工事の状況をご紹介。冒険」2020.02.082020.02.10スポンサーリンクスポンサーリンク最近の投稿ネット上のNURO光紹介特典は個人情報がもれないの?光回線開通!実測するとNURO光はやっぱり速かったNURO光の屋外工事の状況をご紹介。June.メニューホームPython♪の学習とホームページ作成のブログホーム検索トップサイドバーカテゴリーHTML3JavaScript3構造力学1Kotlin4Python63Pythonチュートリアル2Python用語集6ゆうちゃんとPython18数値解析5WordPress3ブログ開設8レビュー5NURO光5雑記2新着記事ネット上のNURO光紹介特典は個人情報がもれないの?2020.02.16光回線開通!実測するとNURO光はやっぱり速かった2020.02.112020.02.16NURO光の屋外工事の状況をご紹介。冒険」2020.02.082020.02.10スポンサーリンクスポンサーリンク。