functions.phpにコピペで出来る!WordPressでGoogleCodePrettifyを使う方法
WordPressを使ってプログラムコードを記載する時、色がつくと非常に見やすくなります。導入自体は難しくはないのですが、ファイルをダウンロードして、テーマファイルにアップロードして、リンクを貼って…という具合に、地味に面倒な作業だったりします。そこで当サイトでも使っているfunctions.phpにコピペで出来るコードをご紹介します。
コード
以下のコードをfunctions.phpにコピペしてください。
function prettyprint_addCode(){
//投稿タイプpostの時
if( 'post' === get_post_type() ){
//コードを追加
echo <<< EOM
<style>pre{max-width:748px;font-family:Consolas,"Courier New",Courier,Monaco,monospace;line-height:1.3;font-size:0.9rem;font-weight:normal;padding:1.5rem;margin:2rem 0;-webkit-user-select:all;-moz-user-select:all;user-select:all;overflow-x:auto;}.prettyprint ol.linenums>li{list-style-type:decimal;line-height:1.3;}</style>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=none&skin=sons-of-obsidian"></script>
EOM;
}
}
function prettyprint_addclass( $content ) {
//投稿タイプpostの時
if( 'post' === get_post_type() ){
//prettyprint用:preタグにクラス付与
return str_replace( '<pre>', '<pre class="prettyprint linenums">', $content );
}else{
//何もしないで返す
return $content;
}
}
add_action( 'wp_footer', 'prettyprint_addCode');
add_filter( 'the_content', 'prettyprint_addclass');
コード解説
- prettyprint_addCodeでは、通常投稿(post)の時に、prettify.jsとスタイルのコードを追加しています。
- prettyprint_addclassでは、通常投稿(post)のコンテンツを表示する際、preタグに対してprettyprintとlinenumsのクラスを付与する処理をしています。
カスタマイズ
- 見た目を変えたいときは、prettyprint_addCodeのstyleをいじってください。ただし、prettyprintで設定されたスタイルもありますので、行間や余白程度にしておくと良いでしょう。
- CSSはstyle.cssに書きたい場合は、該当箇所を削除して別途記載してください。今回は簡単にコピペできる事を重視して、スタイルを直接記述しています。
- prettyprintのテーマを変更したい場合は、skin=sons-of-obsidian の箇所をお好きなテーマ名に変更してください。