質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

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

受付中

回答 1

投稿 編集

flag 質問者が2日前に「まだ回答を求めています」と言っています。

  • 評価
  • クリップ 0
  • VIEW 199

Risney

score 33

前提・実現したいこと

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

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

公式HPより抜粋

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

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

実際の投稿画面

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

行った手順

  1. Prism.js公式HPからjsとcssファイルをダウンロード [設定値URL]
  2. ドメイン名直下に「css」と「js」のディレクトリを作成
    /(ドメイン名)/css
    /(ドメイン名)/js
  3. 上記のディレクトリの中にそれぞれファイルを格納
    /(ドメイン名)/css/prism.css
    /(ドメイン名)/js/prism.js
  4. function.phpにファイルを呼び出す記述を加える
    function.phpは以下の階層にあるものを修正しています。
    /(ドメイン名)/public_html/wp-content/themes/lionmedia-chuld(反映させたいテーマ)

function.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も有名ですが、重いのでこちらに切り替えたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/11 12:16

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

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

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

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

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

    キャンセル

  • 2020/07/11 12:40

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

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

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

    キャンセル

  • 2020/07/11 12:57

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る