本サイトは一部プロモーションが含まれます.

Cocoonのタイトルセパレーターを強引に変更する方法

Cocoonのタイトルセパレーターを強引に変更する方法 ウェブサイト
「Cocoon設定」では設定できない種類のセパレーターにも強引に変更する方法です。WordPressにおける通常のやり方ではできずに困っている人は参考にしてください。

問題点

CocoonはよくできたWPテーマで、かゆいところにも手が届くありとあらゆる設定ができる。タイトルのセパレーターに関してもCocoon設定>タイトル>タイトル共通設定>セパレーターで設定・変更可能です。

しかしここでは | (パイプ) – (ハイフン)しか選べず、それぞれ以下のような表示となります。

パイプ

タイトル | サイト名

ハイフン

タイトル – サイト名

これでも構わないが、ハイフンよりもパイプが好み、そして欲をいうなら、パイプを「 | 」ではなく「|」にしたいという人もいるのではないだろうか。

私もそのひとり。
別に「 | 」で構わないじゃないかという人もいるのだが、そういう人が羨ましい。そう細かいことを気にしないで前に進める人の方が、事業には向いている。

理想形

タイトル|サイト名

「 | 」を「|」にしたい

「 | 」と「|」の違いはなにか。
「 | 」は英語を想定したパイプで、少し下がっている。日本人からしたら意味不明な現象だが、英語の小文字は文字のベースラインから下にはみ出ることがあるので、英語は日本語に比べ重心が下がっているのだ。英語における大文字のところだけで展開される日本語からしたら困った問題。ウェブデザインなんかをしていると、本当に困った問題。例えば文字の上下に同じマージンを置いても、日本語はなぜか上に寄って見えてしまう。ウェブの規格が英語の重心を基準につくられているためだ。

通常の方法

Cocoon設定では叶わないのでfunctions.phpに追記するかたちをとる。ワードプレスにはセパレーター変更用のコードがあり、通常であれば以下にように書くだけで事足りるはず。

function my_document_title_separator( $sep ) {
$sep = '|';
return $sep;
}
add_filter( 'document_title_separator', 'my_document_title_separator' );

しかしCocoonの場合、これではうまく適用されない。
ここで一度軽く頭を抱えるが、更にいくら調べても出てくるのはこの「王道の方法」というのが、欲しい情報に辿り着けず辛いところ。ここまでくるとAIも当てにならない。今回はこれに対する備忘録。

解決策

以下のコードをfunctions.phpに追記するだけ。

上記「通常のコード」も書く必要ない。Cocoon設定は「パイプ」で。
add_filter( 'document_title', function( $title ) {
$title = str_replace( ' | ', '|', $title );
return $title;
});

簡単にいうと、タイトル内の「 | 」を「|」に置き換えるように指示しているというもの。これだけ?と拍子抜けするが、解決策なんて案外単純なもの。そしてシンプルな方がより強い。

例えばコード内の「 | 」や「|」を好きな文字に置き換えれば色々遊べ、実に応用が利く。今回はこのとても便利そうな「イレギュラーチップ」が、王道テクの陰に隠れてしまっていた。そういう事案。

参考にさせていただいたサイト

解決後執筆直前にひょこっと見つかった記事(もっと早く出逢いたかった)

コメント

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