WordPressのオリジナルテーマを0から作る際に個別記事内でショートコードやリンクカードが反映されないという不具合が発生し、解決するまでに少し時間がかかりましたので同じ原因でお困りの方や自分の備忘録のために記事に残したいと思います。
不具合の内容
今回は2つの不具合が発生しました。
- 記事内に貼り付けたプラグインのショートコードが文字列としてそのまま表示されてしまう。
- 記事内に貼り付けたURLがリンクカードにならずに文字列としてそのまま表示されてしまう。
原因を調べる為に他の環境や方法で動作確認をするとこんな感じ。
- ショートコードは記事内以外の固定ページであれば正しく動作する。
- デフォルトのテーマに戻すと記事内でもショートコード、リンクカード共に正しく動作する。
原因と解決方法
0からオリジナルテーマを作成しているので何かのコードが抜けているか書き方が間違っているのだと思いひたすらググって解決方法を探しました。
ググった結果出てきたサイトほとんどに書いてあった解決方法をまとめました。
解決方法の手順は4つありまして下記手順のどれかで解決するはずです。
ちなみに僕の場合は④で解決しましたが、ググって出てきたサイトはほとんど③までしか書かれていなかったので少し特殊なケースだったのかもしれません。
①</head>の上に<?php wp_head(); ?>が抜けている。
</head>の上に<?php wp_head(); ?>が抜けていると不具合が発生する場合があります。
0からオリジナルテーマ を作成する際の必須で必要なコードです。
<?php wp_head(); ?> </head>
②</body>の上に<?php wp_footer(); ?>が抜けている。
</body>の上に<?php wp_footer(); ?>が抜けていると不具合が発生する場合があります。
0からオリジナルテーマ を作成する際の必須で必要なコードです。
<?php wp_footer(); ?> </body>
③他のプラグインの影響。
他のプラグインが原因で動作しない場合があります。
動かしたいプラグイン以外のプラグインを全て停止してみて動作確認をしてください。
停止した状態で動かしたいプラグインが正しく動作する場合は、他のプラグインが原因ですので使用しないか代替えのプラグインを探してみてください。
4.single.php内の本文を取得するコードがおかしい。
WordPressの管理画面で投稿した記事の本文を取得するにはsingle.php内で本文を取得するコードを書くのですがその書き方がおかしかったようです。
今まではこのように書いていました。
<?php $this_content= wpautop($post->post_content); echo $this_content; ?>
これをこのように変えると解決しました。
<?php if ( have_posts() ) : ?> <?php while( have_posts() ) : the_post(); ?> <p> <?php the_content(); ?> </p> <?php endwhile;?> <?php endif; ?>
解決したきっかけ
ググって表示されたサイトでは解決しませんでしたがteratailに質問したのがきっかけで解決しました。
正しく動作しない現状を詳しく書いて投稿したところこのような回答を頂きました。
このあたりを確認してみてください。
【$post->post_content;は整形前の生のデータを抜き出してしまう | ハックノート】
https://hacknote.jp/archives/4148/
まさにこれです！
本文の取得方法の書き方が整形前の生のデータを抜き出してしまう書き方だったので、ショートコードやURLがそのまま文字列として表示されていたんですね。
プログラムに詳しい人であればすぐに気づくのかもしれませんがプログラムの知識がない僕には難しすぎました。
もっと早く質問しておけばよかった。。。
最後に
最初に書いていた本文を出力するコードも「WordPress 本文表示 コード」などでググって表示されたサイトで説明されているオードをそのままコピペしていただけなので、そのコードがどういう事か理解をしていませんでした。
本文を取得するコードも色々書き方があり、たまたま見たサイトのコードが整形前の生のデータを抜き出してしまう書き方だったんですね。
今後はWordPress内で使用する基本的なPHPの関数程度は理解しようと思いこちらの本で勉強中です。
同じような不具合でお困りの方の参考になれば幸いです。
関連記事:
・新しくwebサイトを作る(リニューアル)なら自力SEOで集客可能なWordPress構築サイトがオススメの理由
・腕に自身のあるフリーランスのデザイナーやエンジニアに是非！高収入案件紹介サービス「Workship – ワークシップ」に登録してみた。
LINE@で質問や相談、お仕事の依頼などを受け付けております。
- お仕事の依頼をしたい。
- 記事の内容をもっと詳しく知りたい。
- デザイナーやフリーランスの働き方について聞きたい。
