https://ja.wordpress.org/plugins/highlighting-code-block/

デフォルトでもコード表示はあるけどHighlighting Code Blockはキレイだしコピーボタンもあったりでいい。コード説明中心の記事が多い場合は必須プラグインだな。

ダッシュボード画面から「プラグイン」＞「新規追加」＞「キーワード」に「Highlighting Code Block」と入力してインストールする。もしくは上記サイトからダウンロードして「wp-content」＞「plugins」にフォルダごとアップロードする。インストールできたら「有効化」にする。「設定」に「【HCB】設定」が追加されるので利用に応じて設定を行う。

<!-- サンプルPHP -->	
  <?php if (has_post_thumbnail()) : ?><!-- サムネールがある記事は画像を表示 -->
      <div><a class="icon01" href="<?php the_permalink(); ?>">
　　　　　<?php the_post_thumbnail('thumbnail'); ?><!-- サムネール画像表示  -->
　　　　</a></div>
  <?php else : ?><!-- サムネール画像がない記事は専用画像を表示  -->
      <div><a class="icon01" href="<?php the_permalink(); ?>">
      <img src="<?= get_template_directory_uri(); ?>/img/nonimg.png">
      </a></div>   
  <?php endif; ?>    
 <!-- /サンプルPHP -->

・言語の表示：コードブロックに言語名を表示する場合にチェック
→ただしファイル名を入力するとそっちが優先される
・行数表示：左列に行番号を表示したい場合はチェック　あると説明する時に楽
・コーピーボタン：コードをコピーするボタンを付ける場合はチェック
・フォントスムージング：文字サイズを自動調整したい場合にチェエック　使ってない
・コードカラーリング：編集側と表示側とそれぞれを選択する
・フォントサイズ：PCとスマホとで設定ができる　フォント設定はお好みで
・高度な設定＞使用言語：不要なものを削除することでプルダウンから削除できる

あと独自カラーリングは以下サイトで公開されているの、もしくはカスタマイズしたものを設定できる。「prism.css」「prism.js」をダウンロードして、themes内の利用中のテーマフォルダ内にアップロードしてそれぞれのファイル名を入力する。以上の設定が完了したら保存。

あとは記事内で使いたい段落で「HCB」を選択するだけ。

左が言語選択、真ん中がファイル名。ファイル名を入力すると言語名は表示されなくなる。一番右はハイライトしたい行数を入れると表示側でハイライトされる。複数行の指定も可能で「1,3,5」のように区切ればいい。

ここのサイトでは「Twilight」をダウンロードして使っているが、スタイルシートを適当にカスタマイズしている。枠線カラーとか立体めいているところをフラットに変更した。ただカスタマイズする前からハイライトが表示されないようだ。あとLightを選んでもこのカラーにしかならない。俺だけかな？とにかくおすすめです。