ショートコードで記事タイトルの表示位置を移動する【ワードプレス】
先日、お客さんからの依頼でショートコードを作る仕事があった。
ショートコードを書いた場所にタイトルを表示したいという簡単な内容だったので、「あぁ、そうっすかぁ」みたいなノリで安い金額で受けさせて頂いた。しかし、出来上がった後にお客さんが言った。「サンキュー。ナイスね♪グッジョブよ♪言い忘れちゃって悪かったけど、ショートコードを書いたら、その記事のタイトルが表示されないようにして欲しいんだよね♪」と…。（本当はとっても丁寧な口調の方です）
結局のところ、やりたかった事はタイトルを記事中の好きな位置に移動できるようにしたかったわけです。
～ 目次 ～
どうやってデフォルトのタイトルを消すか
しかし、いざ作ろうとすると「はて？どうしたもんか…」となってしまいました。そもそもショートコードが実行される時には、すでに記事タイトルは出力されているんではないかと…。案の定、そのようでした。
なにかいい方法がないかなぁと、記事タイトルを消すというプラグインの仕組みをざっくりと見てみましたが、結局CSSでdisplay:noneしているようでした。
jQuery＋CSSで対応
結局それかい！と思った方。はい、そうです。
PHPだけで対処できる術は、少なくとも私にはありません。ショートコードの処理にjQueryを書き足しました。これが一番自然で当たり前かもしれませんね。デフォルトの記事タイトル（h1）をdisplay:noneにして、ショートコードの挿入位置に新しく作ったタイトルを表示しています。結果、ショートコードを記述すると、その場所にタイトルが移動したように見えます。
記事タイトルの表示位置を変えるショートコード
以下のコードをコピーして、お使いのWordPressテーマのfunctions.phpの最後に貼り付けます。
※functions.phpの最終行に「 ?> 」と書いた行がある場合は、その行の前に貼り付けて下さい。
|
1 2 3 4 5 6 |
// [move_title] function move_the_title(){ if(is_single() || is_page()){ return '<script>jQuery("h1").css({"display":"none"});document.write(\'<h1>'.get_the_title().'</h1>\');</script>'; } } add_shortcode('move_title','move_the_title'); |
これで、下のショートコードが動くようになりました。デフォルトのh1タグが消されて、ショートコードを書いた位置に新たに記事タイトルが表示されます。
|
1 |
[move_title] |
h1タグをページ内で複数使用するテーマは少ないと思いますが、本来はデフォルトのh1に付けられているClassやIDを付けて、確実に記事タイトルだけに働くようにすべきです。ソースをいじるのが得意でない方は、下の例を参考に書き換えてご利用ください。そうする事でデフォルトのh1のデザインも、移動先でそのまま引き継げるので、より使いやすくなるはずです。
書き換え例1：h1にCSSクラスやIDを付ける
ほとんどの場合、記事タイトルのh1にはクラスやIDが付いています。
下の例は、デフォルトの記事タイトル（h1）に、”entry-title”というクラスが付けられていた場合です。4行目を修正します。
|
1 2 3 4 5 6 7 |
// [move_title] function move_the_title(){ if(is_single() || is_page()){ return '<script>jQuery("h1.entry-title").css({"display":"none"});document.write(\'<h1 class="entry-title">'.get_the_title().'</h1>\');</script>'; } } add_shortcode('move_title','move_the_title'); |
書き換え例2：タイトルを囲っているdivごと移動する
テーマによっては記事タイトルだけを囲っているdivなどがあって、h1だけ移動してしまうと空のボックスだけ残ってしまう場合があります。
下の例は、デフォルトの記事タイトルが、”post-title”というクラスの付いたdivタグに囲われていて、それごと移動する場合です。4行目を修正します。
|
1 2 3 4 5 6 7 |
// [move_title] function move_the_title(){ if(is_single() || is_page()){ return '<script>jQuery("div.post-title").css({"display":"none"});document.write(\'<div class="post-title"><h1>'.get_the_title().'</h1></div>\');</script>'; } } add_shortcode('move_title','move_the_title'); |
最後に
最初は変わった注文だなぁと思いましたが、目的がわかってみると、案外使えるシーンはあるかもしれませんね。
少々カスタマイズすれば、アイキャッチ画像の表示位置を変更する事もできますよ。
ちなみに、このページのコードでは、is_singleとis_pageを使用して、投稿ページと固定ページでしか動かなくしています。これは、アーカイブページを抜粋ではなく全文出力にして運営しているサイトで、リンクが張られていないタイトルに置き換わってしまうのを防ぐためです。アーカイブページ向けに条件分岐を追加して、HTMLタグを変更してリンク付きに修正すれば、どのページで見ても移動した状態で表示できます。
