WordPressでプラグインやJSを使わずにコードを記述する方法

このサイトをpjaxを使ってアニメーション遷移するようになりました。どのような動きをするかは以下のページリンクをクリックして試してみて下さい。ブラウザのキャッシュ残ってると正常に作動しないかもしれないのでキャッシュ削除するかリロードしてみて下さい。

アニメーションページ遷移する

で、Barba.jsというプラグインを使って実装したのですが、ページ遷移後にページ内で使ってるJSを色々と再実行しないと動作に不具合がでます。以前までコードを記述するには、「Crayon Syntax Highlighter」というプラグインを使っていたのですが、JSで動くものなのでページが重たくなるのと、pjaxでは扱いづらいというデメリットがあります。

色々考えた結果、function.phpでショートコードを作って出力する方法が一番ラクだったのでご紹介します。

function.phpでショートコードの作成

ショートコード化しなくてもできないこともないのですが、WordPressのエディタに直接入力すると自動整形で邪魔なpタグが入ったりするのでショートコード化してしまいましょう。

function.php

function codeOut( $atts, $content = null ) {
extract(shortcode_atts(array(
'type_class' => 'null',
'type_title' => 'null',
), $atts));
return '<p class="code-title"><code class="' . $type_class. '">' . $type_title . '</code></p><pre><code>' . htmlspecialchars($content) . '</code></pre>';
}
add_shortcode('code', 'codeOut');

AddQuicktagでコードをエンティティ化

AddQuicktag — WordPress Plugins

WordPressのAddQuicktagをインストールして下さい。

AddQuicktagの設定画面で、拡張コードクイックタグボタンの項目の中に「htmlentities」があるのでチェックを入れましょう。投稿ページで使う場合は「post」に、固定ページで使う場合は「page」にチェックを入れて下さい。

チェックを入れると上記のようにエディタに「HTML Entities」というボタンが表示されます。

ショートコードを使ってコードを出力

以下のコードを例にして記事内に記述してみて下さい。type_classはタイトルのclass名、type_titleはタイトル名です。

ショートコード

[code type_class="php" type_title="PHP"]ここにコードを入れる。入れるコードはAddQuicktagの「HTML Entities」というボタンを使って変換してから挿入して下さい。[/code]

CSSのカスタマイズは各自でお願いします。AMP化などを考慮するとプラグインを使ったコード記述はあんまり望ましくないのかなとも思います。気になる方はぜひやってみて下さい。

© 2011 - 2017 ShoYamane