work.log

元エンジニアの備忘録的ブログ

Cocoonでトップページを作る時のSEOを考慮したカスタマイズ方法

投稿:2019-01-16 01:44  更新:

【重要】2019年11月9日以前にカスタマイズした方へ

以前ご紹介していたCocoonのトップページをカスタマイズする方法ですが、運用上好ましくないと判断したので大幅にカスタマイズ方法を変更しました。

旧カスタマイズ方法はコチラ

上記の旧カスタマイズ方法は非推奨です。今後は新しいカスタマイズ方法をご利用ください。

WordPress でブログじゃないサイトを作るため Cocoon を触ってます。

Cocoon はブログを作る時によく使う機能がほぼ網羅されていて、プラグインだとか PHP をゴリゴリいじるカスタマイズが不要で、ホントに無料?って言うくらい凄いテーマです。

自分がWordPressを使い始めた頃はPHPを触らなければ思うようにデザインも出来ないという感じでしたが、今のテーマは本当にカスタマイズがしやすいです。

しかし今回はブログじゃないサイトでトップページを作ろうとした時に、PHP のカスタマイズが必要だったのでそのやり方を書いておきます。

スポンサーリンク

Cocoonでトップページを作ると普通はこうなる

まずはじめに、Cocoon でトップページを作るとこんな見た目になります。

Cocoonでフロントページを作るとこうなる

ブログじゃないサイトを作る時のトップページって、お知らせとかオススメ情報とか各記事へのインデックスを表示したい所ですが、ブログでの利用を想定?している Cocoon でそれを作ろうとすると上記のように不要な箇所が多いです。

不要な箇所を消すのは勿論、トップページのSEOを考慮するとサイト名は <h1> タグで囲っておきたいです。

検索で調べるとページタイトルを含む不要な部分は「display: none;」で消してしまうというカスタマイズ方法を見かけたのですが、デフォルトの状態だとページタイトルには <h1> タグが設定されています。

そこを「display: none;」してしまうと、トップページに <h1> が無い!と Google に判断されかねないので SEO 的に心配です。過去に Google が「display: none;」嫌いと発表していたのも気になります。

できれば正しい HTML マークアップを維持してこうしたいですよね。

Cocoonをカスタマイズした後のフロントページのイメージ

前置きが長くなりましたがこのやり方を下記に書き残します。

カスタマイズ後のサンプルは下記サイトをご確認ください。

Cocoonでトップページを作るためのカスタマイズ

カスタマイズは Cocoon 推奨の子テーマを使っている事を想定しています。

上記の要件を満たすためにこのようなカスタマイズを行っていきます。

  1. カスタマイズファイルをダウンロードする
  2. 解凍して出てきた include, tmp フォルダを子テーマ内にアップロードする
  3. 子テーマのfunctions.phpを修正する
  4. CSSで見た目を調整する

カスタマイズに必要なファイルは下記へアップロードしていますのでダウンロードしてください。

同梱ファイルは下記です。

  • include/func-custom-header.php
  • tmp/frontpage-contents.php
  • tmp/page-contents.php

WordPressおよびCocoonは常に最新版を利用するポリシーで運用中です。もし、変更があればこのページの内容も更新します。

子テーマのfunctions.phpをカスタマイズ

子テーマ内に includetmp フォルダをFTPでアップロードしたら、functions.phpに下記コードを追加します。

// include ディレクトリ以下のカスタマイズファイルを読み込み
foreach ( glob( dirname( __FILE__ ) . '/include/func-*.php' ) as $file ) {
	include_once( $file );
}

何とこれでカスタマイズはほぼ完了です。

ブログをリロードしてエラーが出ていないかとか、期待通りに動作しているかを確認してください。

今追加したのは何をしているコードなのかというと、先程アップロードした includeディレクトリからカスタマイズファイルをインポートしているという処理になります。

includeディレクトリ内の “func-” から始まるPHPファイルを勝手にインクルードするという処理で、何かカスタマイズしたいものがあれば func-hoge.php みたいな命名規則のPHPをこのディレクトリにぶち込めば、WordPressが勝手に読み込んでくれます。

カスタマイズをしているとfunctions.phpの可読性が悪くなり「何のコードだっけ?」となるので、それを防ぐためにこうしています。

不要になったカスタマイズは該当するファイルをincludeディレクトリから消せばOK!管理も楽です。

CSSの調整

最後は CSS で少しだけ見た目を調整してあげます。

/************************************
** 子テーマ用のスタイルを書く
************************************/

.main {
        padding: 9px 29px;
}

若干、メインコンテンツの位置がズレてしまうので子テーマのスタイルシートで調整して完了です。

トップページの作り方

念の為、WordPress でトップページを設定する方法も書いておきます。

まずは固定ページにトップに表示したい内容を書きます。

そして、「設定」→「表示設定」で先程のページを表示するように設定すれば OK です。

後はおかしな所がないかを念の為チェックしておきましょう。

カスタマイズファイルの解説

アップロードしたファイルがどのような処理を行っているか興味がある方だけ読んでください。それ以外は読み飛ばして大丈夫です。

下記でカスタマイズのポイントを説明します。

func-custom-header.php

このファイルではサイト名のHTMLタグを制御する処理をカスタマイズしています。

<?php

/* フロントページのタイトルタグをカスタマイズ */
function custom_the_site_logo_tag( $tag ) {

	if ( is_front_page() ) {
		$tag = preg_replace( '/div/', 'h1', $tag );
	}

	echo $tag;

}
add_action( 'the_site_logo_tag', 'custom_the_site_logo_tag', 10, 1 );

?>

旧カスタマイズでは generate_the_site_logo_tag 関数を子テーマで上書きしていましたが、親テーマ側で更新されると子テーマ側も修正が必要になり面倒なので、the_site_logo_tag をフックして、親 → 子の順に処理するようにしました。

親テーマで the_site_logo_tag が呼ばれたタイミングで引っ掛けて、フロントページの場合は div を h1 へ置換するという処理にしています。

これなら親テーマのアップデートにも強いはずです。

frontpage-contents.php

このファイルは新しく追加したフロントページ専用のテンプレートファイルです。元はcontent.phpになります。

旧カスタマイズではカスタマイズしたcontent.phpで親のテーマを上書きするという処理でしたが、多々問題が合ったのでこのように完全にテンプレートを分ける事にしました。

page-contents.php

このファイルは親テーマよりコピーしカスタマイズした、固定ページを読み込む時のテンプレートです。これで親テーマのpage-contents.phpを上書きしています。

この中でcontent.phpを呼び出しているのですが、フロントページの場合は先程のfrontpage-contentsを読み込むように変更しています。

<?php //本文の表示
// フロントページの場合
if ( is_front_page() ) {
  get_template_part( 'tmp/frontpage-contents' );

// 固定・投稿ページの場合
} else {
  get_template_part( 'tmp/content' );
}
?>

旧カスタマイズと比べ、if文の追加が1回で済むので何か変更があっても修正しやすいはずです。

可読性もだいぶ良くなりました。

旧カスタマイズ方法が駄目な理由

ここは11/9以前の旧カスタマイズをしている方以外は読み飛ばして大丈夫です。

以前はこれとは違う方法でカスタマイズしていましたが、それの何が駄目なのかを書き残しておきます。

旧カスタマイズ方法を使い続ける事も可能ですが、どういう考えで刷新したかを共有させていただければと思います。

Cocoonの新機能が使えない

旧カスタマイズ方法で提供していたカスタマイズファイルを利用していた場合、「レビュー」等の新機能が使えません。

親テーマの関数を上書きしたり、親テーマをテンプレートファイルを、子テーマ側のテンプレートファイルで上書きするというカスタマイズ仕様のためこの影響が発生します。

変更による影響範囲が大きい

旧カスタマイズ方法ではテンプレートファイル (tmp/content.php) を編集していますが、これは投稿および固定ページで利用される共通のテンプレートになるので実は影響範囲が大きいです。

例としては最近追加されたレビュー機能が投稿ページで使えないという残念な結果になっていると思います。新カスタマイズ方法では関係ない部分へ影響が出ないよう考慮しました。

今後Cocoonで何か大きな変更が合った場合、子テーマでさらなる不具合が出る可能性があります。

カスタマイズ方法がダサい

旧カスタマイズ方法ははっきり言ってダサいです。それは、親テーマのアップデートに弱いからです。

直接関数を触ったり、投稿および固定ページで共有する重要なテンプレートを複数箇所修正するのは、可読性が悪くなり差分チェックの手間が増えるので失敗だったと思っています。

カスタマイズでどうしても触らないといけないメインファイルはありますが、今回は極力修正箇所を減らしシンプルにまとめました。

旧カスタマイズ方法の直し方

旧カスタマイズを削除し、新しいカスタマイズ方法に修正する方法を記載します。

下記フローで修正できます。

  1. 子テーマ内のfunctions.phpより “generate_the_site_logo_tag” 関数を削除
  2. 子テーマ内の “tmp/content.php” を削除
  3. 上記記載の新カスタマイズ方法を実施

functions.php内の generate_the_site_logo_tag 関数はこのような部分です。

function generate_the_site_logo_tag($is_header = true){
	$tag = 'div';
	if ( ( is_front_page() || !is_singular() && !is_archive() ) && $is_header ) {
		$tag = 'h1';
	}
	if ($is_header) {
		$class = ' logo-header';
	} else {
		$class = ' logo-footer';
	}

	$logo_url = get_the_site_logo_url();
	$footer_logo_ur = get_footer_logo_url();
	if (!$is_header && $footer_logo_ur) {
		$logo_url = $footer_logo_ur;
	}
	if ( $logo_url ) {
		$class .= ' logo-image';
	} else {
		$class .= ' logo-text';
	}
	//ロゴの幅設定
	$site_logo_width = get_the_site_logo_width();
	$width_attr = null;
	if ($site_logo_width && $is_header) {
		$width_attr = ' width="'.$site_logo_width.'"';
	}
	//ロゴの高さ設定
	$site_logo_height = get_the_site_logo_height();
	$height_attr = null;
	if ($site_logo_height && $is_header) {
		$height_attr = ' height="'.$site_logo_height.'"';
	}


	$logo_before_tag = '<'.$tag.' class="logo'.$class.'"><a href="'.get_home_url().'" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about">';
	$logo_after_tag = '</span></a></'.$tag.'>';
	if ($logo_url) {
		$site_logo_tag = '<img class="site-logo-image" src="'.$logo_url.'" alt="'.get_bloginfo('name').'"'.$width_attr.$height_attr.'>';
	} else {
		$site_logo_tag = get_bloginfo('name');
	}
	echo $logo_before_tag.$site_logo_tag.$logo_after_tag;
}

親テーマは高頻度でアップデートされているので、こういう書き換えカスタマイズは好ましくないですね。

このgenerate_the_site_logo_tag関数も既に最新のCocoonと差分があります。上記コードはくれぐれもコピーして利用しないようお願いします。

まとめ

Cocoon でトップページを作る時のカスタマイズ方法は以上となります。Cocoon は高機能でカスタマイズ性も良い優れたテーマですね。

何かあればこのページでお知らせしますが、カスタマイズは自己責任にてお願いします。

外部リンク

Cocoon公式サイト

スポンサーリンク

コメント

  1. ゆういち より:

    とても参考になりました。
    cocoonの解説サイトは、簡単なカスタマイズを紹介しているところが多いので困っていましたが、知識のある方のサイトに辿り着けてよかったです。
    ありがとうございました。

    • miura より:

      コメントありがとうございます。
      この記事が役に立ったようで良かったです!

  2. しょうた より:

    とてつもなく助かりました!
    感謝です

    • ハッシー より:

      CSSは得意ですがPHPが分からず、h1・SNSとも全く同じ悩みを抱えていたので助かりました!有難うございます(^_^)

miura にコメントする コメントをキャンセル

よく読まれている記事

  • 本日
  • 週間
  • 月間