워드프레스 코드블록 예쁘게 꾸미기 - PrismJS로 코드 하이라이트 적용하기

PrismJS로 코드 하이라이트 적용한 결과 화면 캡쳐 — ( コードハイライトを適用した結果 )

こんにちは！もしかしたら、皆さんも WordPress ブログにコードを上げたが、あまりにも地味に見えて悩んでいますか？私も最初はそうだったんですよ。

しかし、心配しないでください！今日は、あなたのコードをきれいにするための コードハイライト」機能を WordPressに追加する方法をお知らせします。

特に PrismJS(PrismJayes)という強力なオープンソースツールを使って、プラグインなしで素敵なCode Hightlightを実装する方法を最初から最後まで詳しく説明します！

1.PrismJSとは？

プリズムジェイエスは現代的なウェブ標準に基づいて作られた軽量なCode Hightlightツールです。多くのウェブサイトで使用されており、あなたのコードをより読みやすく、プロフェッショナルに見せることができます。プリズムジェイエスは様々なテーマとプラグインを提供しているので、ブログスタイルに合わせてカスタマイズすることができます。

PrismJS 홈페이지 화면 — ( プリズムジェイエスのホームページ画面 )

2.PrismJSファイルのアップロード

プリズムジェイエスを適用するには、まず、必要なファイルをダウンロードした後、現在の自分の WordPress テーマフォルダにアップロードする必要があります。

코드 하이라이트 적용 대상 언어 선택 화면 — ( コードハイライト適用対象言語を選択 )

2-1.ファイルのダウンロード

PrismJS公式サイトに移動してDownloadボタンをクリックします。
圧縮レベルは ミニチュア版(最小化されたバージョン)を選択します。
テーマは オカイディア(推奨)を選択します。
必要な言語を選択します。基本的に マークアップ, CSS, Cのような, JavaScriptそして PHPを選択します。私は追加でPythonとRを選択しました。
プラグインの「Copy to Clipboard Button」を選択して、コードのコピー機能を追加します。
Download JSとDownload CSSボタンをクリックでファイルをダウンロードします。

Copy to Clipboard Button 선택 화면 — ( Copy to Clipboard Button選択画面 )

2-2.WordPressにファイルをアップロード

ダウンロードした prism.jsと prism.css ファイルを現在自分が適用されている WordPress テーマのディレクトリ内に assets/js および 資産/css フォルダにアップロードします。最終パスは次のようになります。 あなたのテーマは現在適用しているテーマ(例：Kadence、Twenty Twenty-Fiveなど)のフォルダを意味します。

/wp-content/themes/your-theme/assets/js/prism.js
/wp-content/themes/your-theme/assets/css/prism.css

3. `functions.php` そして `prism.js` ファイル設定

PrismJSを WordPressで適用するには functions.php ファイルを修正する必要があります。今回のポストで重要な部分の一つがこの部分なので、集中して内容をレビューし、フォローしてください。

3-1. `functions.php` コード追加

WordPress 管理者画面で外観（Apperance）>テーマファイルエディタ（Theme File Editor）に移動します。
子テーマの functions.php ファイルを開きます。ここで子テーマを使う理由は子テーマを使うと親テーマが更新されても皆さんのカスタマイズが維持されます。子テーマでない場合は設定をすることをお勧めします。
以下のコードを functions.php ソースコードの下部に追加して更新します。

function enqueue_prism_scripts() { { // プリズム CSS
    // Prism CSS
    wp_enqueue_style(
        'prism-css' 、
        get_stylesheet_directory_uri() . '/assets/css/prism.css'、
        array()、
        '1.29.0'
    )です；

    // Prism JS
    wp_enqueue_script(
        'prism-js'、
        get_stylesheet_directory_uri() . '/assets/js/prism.js'、
        array()、
        '1.29.0'、
        true
    )です；
}
add_action('wp_enqueue_scripts', 'enqueue_prism_scripts')；

このコードはPrismJSとCSSファイルを全てのページでロードします。特定のページだけロードする場合は条件文を追加することもできます。

3-2. `prism.js` コード追加

Prism.jsのダウンロード時に選択したプラグイン(例えば、Toolbar、Copy to Clipboard)を使用するには、以下を追加してください。このファイルは /wp-content/themes/your-theme/assets/js/prism.js ここにあります。上記のようにテーマエディタを使えば簡単に適用することができます。

// Toolbar プラグインの有効化
document.addEventListener('DOMContentLoaded', function () {
    Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) { {
        var button = document.createElement('button')；
        button.innerHTML = 'Copy'；
        button.addEventListener('click', function () { var button.addEventListener('click', function () {
            navigator.clipboard.writeText(env.code)；
        })；
        return button；
    }); }); return button；
}); })；

このコードを追加すると、コードブロックの'COPY'ボタンを使ってそのソースコードを一度にコピーすることができます。

4.グーテンベルクエディタで使う

グーテンベルクエディタでPrismJSを適用するには、次の手順に従ってください。このエディタが何かと思うかもしれませんが、普段使ってるポストエディタです。

コードブロックを追加または選択します。これはご存知のように'/code'を入力します。
コードブロックにマウスカーソルを置いた状態で設定(Settings) - ブロック(Block)パネルの「詳細(Advanced)‘ セクションに移動します。
追加のCSSクラス フィールドに language-[言語名］を入力します。例えば、JavaScriptのコード → →. language-javascript のようにすればOKです。

5.注意事項とヒント

常に子テーマを使用してください。親テーマが更新されても設定が維持されます。
必要な言語だけを選択してファイルサイズを最適化します。ファイルが小さいほど、ページの読み込み速度が速くなります。
コードコピー機能を追加すると、訪問者がより便利にコードを使用することができます。
テーマカラーに合ったPrismJSテーマを選択してください。読みやすさが向上します。

6.トラブルシューティングとFAQ

Q：コードハイライトが適用されません。
A: functions.phpファイルにコードを正確に入力したかどうか、そしてprism.jsとprism.cssファイルが正しい位置にあることを確認してください。

Q: 特定の言語のハイライトが機能しません。
A: PrismJSをダウンロードする際、該当言語を選択したことを確認してください。必要に応じて再ダウンロードして適用してみてください。

Q：ページの読み込み速度が遅くなりました。
A: 不要な言語とプラグインを削除して、ファイルを最小化(minify)して再試行してください。

仕上げ

これで皆さんも専門家のようにコードを綺麗に表示できるようになりましたね。もし質問があれば、コメントで教えてください。一緒に解決しましょう！😊。

もしかしたら、これが難しすぎたり、めまぐるしいと思う方は、コードのコピーボタンだけを適用する方法を WordPressでコードのコピーボタンを簡単に作成：WPCodeでポチッと！ポストで確認してみてください！

#用語解説

wp_enqueue_scripts参考 : WordPressでスクリプトとスタイルを正しくロードする方法
コードハイライト: プログラミングコードを見栄えの良い色とスタイルで強調する機能
PrismJS: 자바스크립트ベースのコード構文強調ライブラリ
グーテンベルク: WordPressの基本的なブロックエディタ
子テーマ: 親テーマの機能を維持しながら修正することができるサブテーマ
シンタックスハイライト: プログラミング言語の文法を色で区別してくれる機能
functions.php: WordPress テーマの機能を拡張することができるPHPファイル

WordPress コードブロックをきれいに飾る - PrismJSでコードのハイライトを適用する

1.PrismJSとは？