参考にしたのはこちらの記事。
JavaScript製軽量シンタックス・ハイライタの一つに、prism.jsというものがあります。
prism.js導入にWordPressプラグイン「Prism Syntax Highlighter」のススメ | 鈍色スイッチ
カラーテーマを6つ備え、きちんと機能する上に軽量なのですが、ハイライトしたい言語が増えると、jsファイルをダウンロードしてセットしなおしたり、prism.jsに追加機能を導入したい場合はそのときもまたダウンロードしたり、という手間がかかります。
そのあたりを一括で管理・解決してくれるのが、プラグイン「Prism Syntax Highlighter」です。
今現在、更新が止まっていて最新バージョンでの確認も行われていないように見えますが、設定画面が一番シンプルだったのでこれに決めました。
使い方は上の記事の通りで、使用したい言語を選択して設定変更ボタンを押せば有効になります。一番下にある設定「Load Prism files (CSS+JS) only to post/single pages」にチェックを入れるのを忘れずに（自分でスクリプトを配置している場合は必要ありません）。
実際に導入してみたらこんな感じ。
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use App\Models\Graph;
use App\Models\GraphSet;
use App\Models\GraphData;
class GraphController extends Controller
{ボタンが表示されない場合
僕の環境では、なぜかアシストボタンが表示されませんでした。
- マルチサイト
- テーマはUnderstrap
- なぜだかクラシックエディタのテキストモードしか使えない
プラグインを入れてボタンを増やすことも考えたんですが、最終的には「自分でボタンを追加する」という方向で落ち着きました。参考にさせて頂いた記事はこちら。
プラグインを使わずにクイックタグを追加
WordPressの投稿画面にプラグインを使わずに自作のクイックタグを追加する方法
なんでもかんでもプラグインを入れてしまうとサイトの読み込み速度が遅くなったりしまので、出来るのであればプラグインを使わずにカスタマイズするのが一番いいと思います。カスタマイズしたものを他に運営しているサイトでも流用する場合、コピペするだけで済むのも便利です。
クイックタグを追加するには、functions.phpに記述します。コードは以下のようになります
紆余曲折あり、最終的にはデフォルトのボタンの取捨選択もしながら、子テーマのfunctions.phpに以下の記述を追加しました。
//クイックタグ編集
//不要なタグを取り除く
add_filter( 'quicktags_settings', function ( $qtInit ) {
// $qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen';
$qtInit['buttons'] = 'link,img,close,fullscreen';
return $qtInit;
} );
//エディタにボタン追加
function custom_quicktags() {
if (wp_script_is('quicktags')){
?>
<script>
QTags.addButton('qt-more','more','<!--more-->\n','','','more',1);
QTags.addButton('qt-h2','h2','<h2 class="h2">','</h2>','','h2タグ',1);
QTags.addButton('qt-h3','h3','<h3 class="h3">','</h3>','','h3タグ',1);
QTags.addButton('qt-h4','h4','<h4 class="h4">','</h4>','','h4タグ',1);
QTags.addButton('qt-strong','b','<b>','</b>','','strong',1);
QTags.addButton('qt-span','span','<span>','</span>','','span',1);
QTags.addButton('qt-blockquote','q','<blockquote>','</blockquote>','','blockquote',1);
QTags.addButton('qt-ul','ul','<ul>\n','\n</ul>\n','','ul',3);
QTags.addButton('qt-ol','ol','<ol>\n','\n</ol>\n','','ol',3);
QTags.addButton('qt-li','li','<li>','</li>','','li',3);
QTags.addButton('qt-codepr','< >','<pre><code class="language-">','</code></pre>','','code',5);
QTags.addButton('qt-code','code','<code>','</code>','','code',5);
QTags.addButton('qt-kbd','kbd','<kbd>','</kbd>','','キーボード',9);
</script>
<?php } }
add_action( 'admin_print_footer_scripts', 'custom_quicktags' );残念ながら「PHP」「Ruby」など、ソースコードの言語を選択してコードを挿入することは出来ませんが、ここまで書いてあればあとは簡単なので。
なお、どんな言語でソースコードを有効にするかはプラグイン「Prism Syntax Highlighter」で有効にしておく必要があります。
