ボクの記事タイトル装飾のコト

ブログ
2020.10.09

はじめに

　ブログの機能強化や改造、デザインなどについての備忘録的記事。
　テーマをいじった際にメモを残しておかないと必ず後々訳が分からなくなると思うので、当記事もそのために書く。
　従って、読んでもらうための記事というよりも、自分のためのメモという側面がほとんどであることはご容赦願いたい。

今回の目標

  • 記事のタイトルを加工したい

さあどうなるか！

　サイトのコンセプトと名称をぼくのこと（ボクノコト）としたので、記事タイトルも基本的には『ボクの○○のコト』というようなものにすることに決めた。
　このテンプレに沿ってタイトルを付けると、しかしタイトルの頭と末に同じ文字が並ぶことになって目が滑る。あくまで重要なのはヘッダフッタではなくタイトルそれ自身なのでそこを強調したいなと考えた。

　とりあえず、テンプレ部分以外を赤字にすることで強調することにした。
　本記事で言えば　ボクの記事タイトル装飾のコト　という感じに。
　幸いWordPressはタイトルにHTMLタグを記載できるので毎回中身を<span></span>で囲んでスタイルを適用させれば実現できるかな、と。
　ところが問題が二つでた。

  1. イチイチ<span></span>で囲むと管理画面で冗長性がウザい
  2. <title></title>の間にもそれが適用されてしまう

　①に関しては我慢の運用という選択肢もあった。あくまで裏側の話であり、閲覧者には関係無いからだ。
　しかし②は致命的。ブックマークをするにしても、ブラウザのタブで確認するにしてもとにかく視認性が悪すぎる。
　そこで、記事タイトルにHTMLタグを含める運用をやめることにした。

　ここから、どうせならWPに自動的に処理させるのがスマートかなと思い、軽く調べた結果function.phpに関数のオーバーライド的なことが可能なフィルタ機能があることが判ったので、それについて調べて実装してみた。

function my_the_title($title) { 
	$search = array('ボクの','のコト');
	$replace = array('ボクの<span style="color:#b94047;">','</span>のコト');
	return str_replace($search, $replace, $title);
}
add_filter('the_title', 'my_the_title', 10, 2);

　というような感じで雑に。
　期待通りの動作をしたので大満足。じゃあ、これで終了と思いきや。

　記事のエントリーカード（トップページとかの記事単位の見出し）内は問題無かったが、依然として<title></title>内にも<span>～</span>が入ってしまい、②の問題をクリアできていなかった。
　テーマを弄らないといけないのかと調べた結果、functionに条件分岐でループ処理内とすれば良さそうなことが解り、ソースを下記の様に修正した。

function my_the_title($title) { 
	if (in_the_loop() OR get_next_post() OR get_previous_post()) {
		$search = array('ボクの','のコト');
		$replace = array('ボクの<span style="color:#b94047;">','</span>のコト');
		return str_replace($search, $replace, $title);
	} else {
		return $title;
	}
}
add_filter('the_title', 'my_the_title', 10, 2);

　これで、<title></title>には余分なhtmlが入らず、「次の記事」や「前の記事」のカードの装飾も可能になった。ところが、これでは足りなかった。
　個別の記事のページの<title></title>には依然としてhtmlが残っていた。なるほど、そこはループ処理の範囲外だもんね。というわけで、根本的な条件分岐を検討しなおすことにした。
　結果、下記の様になった。

function my_the_title($title) { 
	if (is_admin_bar_showing()) {
		return $title;
	} elseif (!doing_action('wp_head')) {
		$search = array('ボクの','のコト');
		$replace = array('ボクの<span style="color:#b94047;">','</span>のコト');
		return str_replace($search, $replace, $title);
	} else {
		return $title;
	}
}
add_filter('the_title', 'my_the_title', 10, 2);

　特定の関数を処理中かを判定するdoing_action関数というのがあったので、ヘッダ関係の関数が働いている時を例外とすることにした。見事に、各ページの<title></title>からhtmlが消えた。
　もちろん、エントリーカードや記事の冒頭はちゃんと加工されている。
　ついでに管理画面の記事一覧などにも適用されないような処理も。

　これでいよいよめでたしめでたしと思ったが、まだ問題があった。

　エントリーカードにマウスを重ねた際に、<a>のtitle属性にhtmlが残っており気持ち悪い感じに。
　再びfunction.phpの処理で何か可能なことは無いか検討したが、イマイチ思い当たらず（調べが追いつかず）、今度こそテーマを弄ることにした。

　このブログではcocoonという定番らしいテーマを利用させて頂いているので、公式の勧め通りに子テーマを使い、親テーマから該当ファイルを引っ張ってきて子テーマのフォルダへとコピーした。
　/tmp/entry-card.php　である。

<a href="<?php echo esc_url(get_the_permalink()); ?>" class="entry-card-wrap a-wrap border-element cf" title="<?php echo esc_attr(get_the_title()); ?>">

　上記を下記へと書き換えた。

<a href="<?php echo esc_url(get_the_permalink()); ?>" class="entry-card-wrap a-wrap border-element cf" title="<?php echo strip_tags(get_the_title()); ?>">

　esc_attr() を strip_tags() に変更。
　pager-post-navi.phpでも同様の改変を。
　何かもっとスマートなやり方があるのかもしれないけれど、初心者にはこれしか思いつかず、という感じに。とりあえずは意図した結果が得られたので満足。
　もっと時間をかければ更にスマートな方法がありそうな気がするが、とにかく日々時間に追われる懐中時計のウサギちゃんなのでここで妥協。問題が出てきたらその時また対処、で。

　WordPressはとにかくリファレンスがしっかりしており、記事も山ほどあるので調べれば大体すぐにやりたいことが判るのがさすがというか。PHPをある程度知っていると改造のハードルもそこまでじゃないので、初心者とはいえ0からでないのは幸いだった。

結果

  • 記事タイトルを加工できた
  • <title>タグ内は例外にできた
  • エントリーカードの<a>のtitle属性も例外にできた

コメント

タイトルとURLをコピーしました