ワードプレスにおけるCSSとJavaScripの読み込み方法とシンタックスハイライトの導入。【初心者向け。プラグインなし】

2021-02-16
2021-02-22
wordpress
47view

wordpress

以前、シンタックスハイライトを導入しようとしましたが、挫折しました。

○プラグインなしでシンタックスハイライトを導入する方法【導入できず】

その後、「インラインコード」を使用して、以下の写真のようにソースの部分だけ背景色を付けたり、枠をつけて実装したいと思いました。

実装したい「インラインコード」の部分を「デベロッパーツール」を開いて、実装しました。そして、そのカスタマイズしたCSSをアップロードしても、デザインは一切変わっていませんでした。カスマイズしたい部分が「user agent stylesheet」になっていたのが原因でした。

「user agent stylesheet」の部分をカスタマイズするには、ワードプレスにリセット用のCSSを読み込ませる必要があるようです（まだでてきいません）。ワードプレスで自分の好きなようにカスマイズするにはCSSとJavaScriptの読み込みは必須なんだと痛感しました。避けては通れないと思い、再度CSSとJavaScriptの読み込みにトライしました。

PHPをまったく理解していないこともあって、ワードプレスでシンタックスハイライトを導入するのに大変苦労しましたが、今回は無事に成功しましたので、導入した一つの事例をご紹介します。

①「prism.css」と「prism.js」をダウンロードする。以下のサイト参照しました。
　○【JS】シンタックスハイライトPrism.jsの使い方

②FTPソフトを用いて、子テーマの中に入っている「functions.php」をサーバーから取得して、自分が使用しているテキストエディタで開いておく。

③以下のサイト参照して、子テーマのCSSとJavaScriptの読み込み用のコードをコピペしておく。
　○WordPressテーマからCSSファイルとJSファイルを読み込む正しい方法

//CSSを読み込むコード
function my_child_styles() {
  wp_enqueue_style( 'style-child-name', get_stylesheet_directory_uri() . '/css/style.css', array(), '1.0.3' );
}
add_action( 'wp_enqueue_scripts', 'my_child_styles' );

//JavaScriptを読み込むコード
function my_child_scripts() {
  wp_enqueue_script( 'script-child-name', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.2', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_scripts' );

④テキストエディタで「functions.php」を開き、コピペしたコードを自分用に修正する。
私は以下の写真のように、子テーマの中に「prism.css」と「prism.js」をアップロードしましたので、ファイルの指定場所を「/css/style.css」→「prism.css」に変更しました。「prism.js」においても同様です。

ただのメモ
「is_singular()」○関数リファレンス/is singular
「wp_enqueue_style」○関数リファレンス/wp enqueue style
「get_stylesheet_directory_uri()」子テーマまでのパスを指定してくれる。
「wp_enqueue_style( $handle, $src, $deps, $ver, $media )」
　・$handle　スタイルシートのハンドル。何を反映するのかわからない。
　・$src　上記参照
　・$deps　読み込みの順番を指定できそう。
　・$ver　スタイルシートのバージョン番号を指定する。CSSに関してはバージョンの指定に意味はないそうです。消去しました。JavaScriptの方も削除しても、シンタックスハイライトの表示に何も問題はなさそうです。

修正後の「functions.php」の記述は以下になります。

//CSSを読み込むコード
function my_child_styles() {
  wp_enqueue_style( 'style-child-name', get_stylesheet_directory_uri() . '/prism.css', array() );
}
add_action( 'wp_enqueue_scripts', 'my_child_styles' );

//JavaScriptを読み込むコード
function my_child_scripts() {
  wp_enqueue_script( 'style-child-name', get_stylesheet_directory_uri() . '/prism.js', array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_child_scripts' );

⑤「functions.php」と「prism.css」と「prism.js」を子テーマフォルダにアップロードする。

⑥ワードプレスの記事の投稿編集画面を開き、「カスタムHTML」を選択する。

⑦<pre><code class=”langage-言語”>表示させたいソース
</pre></code>で記述する。
例えば「カスタムHTML」に以下のように記述すると

<pre>　<code class="language-css">h1 { font-size:25px; }
.btns {
  width: 130px;
    display: inline-block;
    }

.btns p {
  margin:0.5em 0;
  font-size: 23px;
  font-family:'Hiragino Maru Gothic ProN','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}
　</code></pre>

このように表示させる。

　h1 { font-size:25px; }
.btns {
  width: 130px;
    display: inline-block;
    }

.btns p {
  margin:0.5em 0;
  font-size: 23px;
  font-family:'Hiragino Maru Gothic ProN','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

ラインナンバーを表示させたいので、シンタックスハイライトを利用したい場合、基本的に以下のソースをコピペして使用していこうと思っています。

<pre class="line-numbers">
<code class="language-言語名">
	
</code>
</pre>

ツイートもチェックしよう！

フォローする