WordPressブログ内にソースコードを表示させる方法

インストール完了後に［有効化］をして、［設定］へと進んでください。

WP Code Prettify設定方法

WP Code Prettifyの設定画面はシンプルですが、全て英語ですのでブラウザの翻訳機能を使って表示させると良いです。

❶についてはjs/cssファイルはどこからロードしますか？という選択画面ですがこちらはheadタグ内に設置する予定ですので［head]を選択してください。

❷は常にjs /cssファイルを読み込みますか？という選択画面ですが、ブログ内にコードが書かれていない場合でも読み込みすると、サイトの表示時間に負荷がかかってしまうので、ここは［No］にしておきます。

❸についてはプルダウンで選択肢が出てきますが、それぞれにフォントや文字サイズ、背景色などの違いがありますので、自由に選択してください。

❹についてはデフォルトでは既にCSSのコードが書かれておりますのでそのまま利用する事ができます。
（私の場合はCSSファイル上で変更できるように、コードをCSSに移行してデフォルトのコードは消しています。）

❺はデフォルトでも空白ですので、ここは空白のままで大丈夫です。

設定が完了すれば左下の『Save Changes』を押して設定を完了してください。

header.phpのhead閉じタグ直前に記述

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=sunburst"></script>

function.phpに記述

// シンタックスハイライト
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
  wp_register_script('google-code-prettify-js', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian', null, null, false);
  wp_enqueue_script('google-code-prettify-js');
}

■STEP3 プラグイン【Add Quicktag】インストール

＜まとめ＞

 

---

Calma（カルマ）は、枚方市を活動拠点に、主に中小企業や個人事業主をクライアントにしており、様々な業種のクライアントのWebコンサルタントとして企業や事業主のビジネスのIT化、DX化推進のお手伝いをさせていただいております。

サイト制作やサイトリニューアル、Webアプリケーション開発はもちろん、SEO対策やWebサイトの運用、改善といったご依頼から、サイト保守やバナー作成、ロゴデザイン作成、名刺デザイン作成、動画作成、動画編集、ブログ更新代行のようなスポットのご依頼まで幅広く承っております。

Webについてのお困りごとやご相談がありましたら、下記お問い合わせフォームよりお気軽にご相談ください。
（相談＆見積り無料）

ご相談はこちら

---