parudou
※現在リダイレクトにて新サイトへ移行中です
parudou
parudou
更新日:2018/10/15

WP Code Highlight.jsの賢い使い方を紹介(ローカル化・クイックタグ作成)

当サイトはソースの表示に「WP Code Highlight.js」を使っています。
これはプラグインですが、個別にファイルをアップロードして使う方法もあります。
そちらの方が絶対に良いので、やり方を紹介。

1、公式HPからダウンロード

こちらの公式HPを開いてください。
https://highlightjs.org/

「Get version 9.12.0」といったボタンがありますのでクリックします。
次に自分が使うプログラム名にだけチェックを入れて、ダウンロードします。

2、サーバーへアップロード

「highlight.pack.js」と好みのCSS(agate.cssなど)をサーバーへアップロードします。
ディレクトリ直下かテーマのディレクトリが良い。

3、header.phpに記載

「header.php」の<head></head>内に次のようにコードを追加します。
※ホームディレクトリ直下にアップロードした場合
※「script」はBODY内でもOK


<link rel="stylesheet" href="agate.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

これで「WP Code Highlight.js」の設定は完了です。

4、使い方

記事作成ページのテキストモードにて、
ソースを「<pre><code>~</code></pre>」で囲みます。

<pre><code>
<link rel="stylesheet" href="agate.css">
<script src="highlight.pack.js"></script>
</code></pre>

次のように「class=”html”」とプログラム名を指定しても良い。
指定しない場合、自動的に最適なものが適応されますが、
時々間違っているので、指定するのが無難。

<pre><code class="html">
<link rel="stylesheet" href="agate.css">
<script src="highlight.pack.js"></script>
</code></pre>

HTMLコードを表示させたい場合、HTMLエンコードが必要です。
ビジュアルモードにて貼り付けて、テキストモードにすると自動的にエンコードしてくれるので、
そうしてエンコードされた状態で「<pre><code>」で囲みます。

5、完璧な使い方

クイックタグを作成し、1クリックで囲めるようにしたい。

ワードプレスのクイックタグ説明

functions.phpに次のコードを追加します。

<?php
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'precode', 'precode', '<pre><code>', '</code></pre>' );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
?>

これを追加すると、記事作成画面のテキストモード時に、
「precode」というクイックタグが表示されます。
これで1クリック化完了。

ソース表示としてはとても軽くて使いやすい。
機能性は劣りますが、簡単に表示したいだけならおすすめできるプラグインです。

プラグインとしてインストールしてCDNにすると、
プラグインのサービスが終了したら表示されなくなるリスクがあります。
こうしてローカル(自分のサーバー)に保存して使うのが絶対に良い。

是非ご感想・ご指摘等をください。

プロフィール

管理人:parudou
単なるWEBサイト作成マニアです。
底辺法人アフィリエイター。
パルどうSEOブログ
パルどう.com マガジン

閲覧履歴
履歴なし
カテゴリー
Copyright (c) parudou All Rights Reserved.