WordPressにシンタックスハイライターの「Prism.js」が反映されない

Question

前提・実現したいこと

■前提
・Xserver契約
・Wordpress利用
・LION Blog（LION Media）というテーマを使用

■実現したいこと
表題の通りですが、
期待値としては以下の画像のように、
シンタックスハイライトが有効化されることです（画像参照）

発生している問題・エラーメッセージ

LionMediaというテーマには、
元々コードがハイライトされる機能が実装されているのですが、
それが邪魔していて期待値どおりに表示されないようです（画像参照）

しかし「css」や「copy」ボタンが表示されているので、
反映されている部分もあるようです。

行った手順

1. Prism.js公式HPからjsとcssファイルをダウンロード [設定値URL]
2. ドメイン名直下に「css」と「js」のディレクトリを作成

/(ドメイン名)/css
/(ドメイン名)/js
0. 上記のディレクトリの中にそれぞれファイルを格納
/(ドメイン名)/css/prism.css
/(ドメイン名)/js/prism.js
0. functions.phpにファイルを呼び出す記述を加える
functions.phpは以下の階層にあるものを修正しています。
/(ドメイン名)/public_html/wp-content/themes/lionmedia-chuld(反映させたいテーマ)

functions.phpに追記したコード

add_action( 'wp_enqueue_scripts', 'my_files' );
function my_files() {
 	//Prism.jsのCSSとJSの呼び出し
 	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
 	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), '20170221', true );
}

試したこと

■試したこと①
こちらのサイトを参考に元のハイライトを解除するCSSを追加するが、状況は変わらずでした。

外観 > カスタマイズ > 追加 CSS　に以下のコードを追加

/* Syntax highlight */
.content .wp-block-code{
  padding:0px;
  border-left: none;
  font-size:1.8rem;
}

@media only screen and (max-width: 767px){
  .content .wp-block-code{
    padding:0px;
    font-size:1.4rem;
  }
}

■試したこと②
こちらのサイトを参考にheadタグ内で「Prism.js」を読み込み指定するが、状況かわらず。

<link rel="stylesheet" href="アップロードしたフォルダまでのパス/prism.css"> 
<script src="アップロードしたフォルダまでのパス/prism.js"></script>

備考

・公式HP記載の使用方法（日本語へGoogle翻訳）

・よく比較される「highlight.js」もありますが、
行番号を表示させたい為「Prism.js」を使用することにしました。

・テーマとの相性があるかもしれないです…。

・またプラグインのcrayonも有名ですが、重いのでこちらに切り替えたいです。

Answer 1

function.phpではなくfunctions.phpにコードを書かないと動かない

そしてwp_enqueue_style()とwp_enqueue_script()が動作してもこれでは404エラーになる

ドメイン名直下に「css」と「js」のディレクトリを作成
/(ドメイン名)/css
/(ドメイン名)/js
上記のディレクトリの中にそれぞれファイルを格納

lionmedia-chuldの中にcss、jsディレクトリを作成して必要なファイルを配置しなければならない

Comments

[Risney]

回答ありがとうございます。

「function.php」は誤字で、「functions.php」でした。
ご指摘ありがとうございます。

つまり以下の様にすれば良いということでしょうか？
/lionmedia-chuld/css/prism.css
/lionmedia-chuld/js/prism.js

[Risney]

上記の階層で試しましたが、適用されませんでした。
やはりテーマとの相性でしょうか…

一旦違うテーマで同じ状態にして反映されるか試してみたいと思います。

[退会済みユーザー]

まずソースやデベロッパーツールで当該ファイルが正しく読み込まれているか確認

[Risney]

読み込まれていなければ、「発生している問題・エラーメッセージ」内の画像の通りにcss,copyボタンが表示されないと思います。
そこは表示されているので、読み込まれている上で、テーマのシンタックスが上書きされていると思っていますが違うのですかね…

[退会済みユーザー]

あくまで確認
問題の切り分けするのに必要だと思うが
そもそも書かれている内容の通りだとパスが違うのでファイルが存在しないことになる

>テーマのシンタックスが上書き
どちらかといえば競合してしまうと思う

[Risney]

理解しました。
パスが違くても反映はされるのですね…

>どちらかといえば競合してしまうと思う
たしかにどっちのデザインも反映されてますね。

[退会済みユーザー]

>パスが違くても反映はされるのですね…
そんな事を書いて無い

階層が違えば読み込まれるはずがないので
ソースやデベロッパーツールで当該ファイルが正しく読み込まれているか確認
と書いたが、その確認すらしない理由は？

とりあえずやるべきことは設置したファイルが正しく読み込まれているか
読み込まれていないなら正しく設置

読み込まれていて意図した動作しないならJS絡みのエラーが無いか確認

テーマに初めから組み込まれたソレを無効化

[Risney]

>そもそも書かれている内容の通りだとパスが違うのでファイルが存在しないことになる
ファイルが存在しないことになるのに反映されているのでそゆことかと思いました

確認しない理由については、
確認方法が不明だからです。
わかるのであれば記載してます。

ありがとうございます。
不明点は自分で調べてやってみます。

[退会済みユーザー]

ブラウザでソースを表示してprism.cssとprism.jsがあるかどうか
クリックすれば有無も分かるが
また、デベロッパーツールで確認すればファイルが存在しなければ404エラーになる
ソースやデベロッパーツールの意味や使い方はネットで検索すれば情報がある