LightsailのWordPressでPrism.jsを導入する

1. sshでamazon Lightsail環境に接続できるようにする

こちらにまとめてあるので参照してください。

2. Prism.jsのダウンロード

Prism.jsとPrism.cssの２つのスクリプトを入手する必要があります。

これらのファイルは、Prism.jsのウェブサイトからダウンロードできます。

ダウンロードページを開くと、チェックボックスが沢山羅列されているのが分かると思います。

この選択肢の中から、自分の好みに合わせて使いたい言語、デザイン、追加機能にチェックを付けていきます。

好みのチェックを付け終わったら、ページ下部の「DOWNLOAD JS」「DOWNLOAD CSS」からPrism.js, Prism.cssをそれぞれダウンロードします。

3. Prism.js のサーバーへのアップロード

1で接続できたlightsailのssh環境に接続してファイルをアップロードして、適切な箇所にファイルを置きます

cd ~/Downloads #　Downloads にprismのファイルをダウンロードした前提
scp prism.css sshホスト名: 
 prism.css   100%   10KB 998.2KB/s   00:00
scp prism.js sshホスト名:
 prism.js    100%   99KB   1.9MB/s   00:00
ssh sshホスト名 #lightsailの環境に接続する
cd /opt/bitnami/wordpress/wp-content/themes/cocoon-child-master/
sudo -s
mkdir prism
cp /home/bitnami/prism.* ./prism/
chown -R daemon:daemon prism

4. function.phpにPrism.jsを読み込むためのコードを追記する

次に、WordPressからPrism.jsがどこにあるかを伝えて、読み込んでもらうための記述を書きます。

// prism.js の読み込み
function add_files_prism_js() {
	wp_enqueue_script( 'gohey_includes', get_stylesheet_directory_uri() . '/prism/prism.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_js' );

// prism.css の読み込み
 function add_files_prism_css() {
 	wp_enqueue_style( 'gohey_includes', get_stylesheet_directory_uri() . '/prism/prism.css', '', '' );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_css' );