WordPressを利用しているが、そのWordPressのブログ内に、自分で作成したHTMLサイトだったり、JavaScriptを使ったプログラミング内容を設置したい場合の解説です。
方法はいくつかあるんですが、最も簡単なのはShortcoderというプラグインを利用することです。
WordPress上でプログラムを動かす
Shortcoderを使うメリットは
・Wordpressのテーマ自体を編集する必要がない、つまりfunctions.phpなどを触って壊してしまうリスクがない
・決まった自作HTMLテンプレートなどをいろんな記事で使いまわせる
・JavaScriptやCSSを特定の記事だけに適用できる
例えばHTMLやCSSをその記事だけで適用させたい場合、テキストエディタで直接書くことができるのでその方法でいいと思います。
ただしJavaScriptを使う場合には注意が必要です。JavaScriptコードを<script>で囲み、空行を削除することで動くようなんですが、私の環境ではうまく動かず。
ちょっと試した結果ですが、デフォルトのブロックエディター(Gutenberg)であれば記事投稿画面から、カスタムHTMLにJSコードを書くことで動作しました。しかし私の場合クラシックエディターを使っており、テキストエディタに書いてもうまく動きませんでした。ということでJavaScriptはちょっと厄介なのでShortcoderに書いて仕舞えば解決します。
私の実際の利用方法ですが、HTMLとJavaScriptを利用した計算ツールを自分のブログ上で公開したく、Shortcoderを使っています。
以下に、実際にブログ上で公開してますので確認ください。以下はサンプルとしてcmをインチに変換するツールです。数字を入力すると即座に計算結果がJavaScriptによって表示されます。Q&Aの箇所はjQuery、横幅などはBootstrapですが、どちらも正常に動作します。
cmからインチへの換算ツール
また、以下のようにShortcoderを使って、コードを記事内に埋め込むこともできます。
cmからインチへの換算ツール
センチメートルからインチへ: 0 in
Shortcoderの使い方
手順は以下の2ステップのみです。
Shortcoderに自作コードを登録
自作のコードをShortcoderに登録します。まずはShortcoderのプラグインを追加し、ショートコード作成画面に入ります。好きなタイトルを付け、コードを貼り付けし公開ボタンを押します。作成したショートコードの名前をコピーしておきます。
なお、CSSやJavaScripは外部ファイルに書くのではなく、HTMLファイルに直接書いてしまいます。つまりCSSは<style>で囲み、JavaScripは<script>で囲むということです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> <style> h1 { color: blue; } </style> </head> <body> <h1>Blue</h1> <script> // ここにJavaScriptを記述 </script> </body> |
記事作成画面からShortcoderを呼び出す
記事投稿画面でコピーしたショートコードを貼り付けします。ショートコードだけでもいいですし、記事の中に埋め込んでもOK。記事編集画面にShortcoderボタンもあるので、そこから選んでもOKです。
補足
HTMLやCSS、JavaScriptをローカル上で動かす方法
まずはtest.htmlといったファイルを好きな場所に作成します。Macであればそのファイルを右クリックし「このアプリケーションで開く」からChromeやSafariを選べばブラウザ上で動かすことができます。HTML、CSS、JavaScripを記述し、ローカルで動作確認をします。完成したらそのコードをそのままShortcoderに貼り付ければWordPress上で公開できます。他のプログラム言語では開発環境を整えるのが大変ですが、HTMLとかJavaScripはすぐに動かせるのでプログラム入門、お試しにも向いています。