Prismのインストール

まずは以下の手順で必要は　ScriptファイルとCSSファイルをダウンロードします。

  • Prism.js公式サイトここから始めます。
  • サイトページ右上のDOWNLOADボタンをクリックして次の画面に進みます。
  • Customize your downloadの画面で自分の要求に合わせてオプションを選んで行きます。
  • ページの最後に有る　DOWNLOAD JS　と　DOWNLOAD CSS　ボタンをクリック。
  • これで、必要は　ScriptファイルとCSSファイルがダウンロードされます。

問題はこれをどうやって動かすか

prismはプラグインと違い自分でWPに組み込み動かす必要が有ります。組み込み実行する為に以下の作業が必要です。

  • 先程ダウンロードしたScript/CSSファイルをサーバーにアップロード。
  • それらのファイルをWPが立ち上がる、または何かの動作をする時のイベントトリガーに合わせて読み込み実行する。

サーバーにアップロード

アップロードするファイルは　prism.js prism.cssの２つです。場所はサーバーの何処でも良いと有ったので、子テーマフォルダーの下にprismというファルダーを作りその中に保存しました。

イベントトリガーに合わせて読み込み実行

以下の関数を使ってprismの組み込みと実行をします。

    • add_action( $hook, $function_to_add, $priority, $accepted_args )
      • $hook：関数が実行されるきっかけとなるトリガー名。
      • $function_to_add：実行される関数名
      • $priority：オプション。関数が実行される優先順序
      • $accepted_args：オプション。関数が受け入れられる引数の数

    コードは子テーマのfunctions.phpに以下の様に書きます。

    functions.php 
    
add_action( 'wp_enqueue_scripts', 'prism_style' );
function prism_style() {
     wp_enqueue_style( 'prism-css', get_stylesheet_directory_uri() . '/prism/prism.css' );
     wp_enqueue_script( 'prism-js', get_stylesheet_directory_uri() . '/prism/prism.js', array('jquery'), '312', true );
}
    • add_action( ‘wp_enqueue_scripts’, ‘prism_style’ );
      • ‘wp_enqueue_scripts’：これがトリガー。
      • ‘prism_style’：実行する関数名
      • ー＞この設定でWPが’wp_enqueue_scripts’トリガーを出したら’prism_style’が実行される
    • function prism_style() {
      • 実行される関数の定義。ここでは２つの関数が使われています。
      • wp_enqueue_style( ‘prism-css’, get_stylesheet_directory_uri() . ‘/prism/prism.css’ );
        • wp_enqueue_style()：CSSファイルを読み込む時に使う関数
          • 第一引数：ハンドルネーム。任意に設定可。
          • 第二引数：CSSファイルのパス。
        • wp_enqueue_script()：Scriptファイルを読み込む時に使う関数
          • 第一引数：ハンドルネーム。任意に設定可。
          • 第二引数：Scriptファイルのパス。
          • 第三引数：スクリプトの依存先。’jquery’を指定。
          • 第四引数：バージョン。
          • 第五引数：配置場所。true ： </body> 終了タグの前。それ以外<head> に置かれる

    これでprismが動作します。

    <Top>

    <Home>