work.log

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

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

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

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

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

サーバの高速化は KUSANAGI、WordPress は Cocoon があればもうエンジニアは要らないんじゃないかって位やる事がなくてボケそうになってます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. CocoonのPHPファイルをカスタマイズする(2箇所)
  2. CSSで見た目を調整する

下記でやり方を書いてますが、修正だるいという人用にカスタマイズ済みのファイルをアップしておきます。

解凍して出てきた中身をそのまま子テーマ内にアップすれば適用できますが、既にスタイルシートや functions.php 等を触ってしまっている人は注意してください。

親テーマ「Version: 1.7.6.1」、子テーマは「Version: 1.0.6」を使ってます。

WordPressは常に最新版を利用するポリシーで運用しているので、Cocoonのテーマアップデートにカスタマイズも追随する予定です。もし、変更があればこのページの内容も更新します。

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

まず最初は子テーマ内の functions.php に generate_the_site_logo_tag() 関数を追加するカスタマイズから。

Cocoon のサイト名の表示部分はこの関数で制御されているため、トップページ(フロントページ)ではサイト名に <h1> を付けるようにカスタマイズします。

この関数は親テーマの “cocoon-master/lib/html-forms.php” に記述されています。コードの内容的には分岐条件を少し変えてあげるだけでいけそうです。

Cocoon は色々と親切なテーマで子テーマでこの処理を上書きできるようになっていたので、ここのソースコードを元に子テーマの functions.php にこんな感じで追加してあげます。

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;
}

元々は、投稿ページか固定ページかアーカイブページじゃないならサイト名は <h1> みたいな処理に、フロントページ(トップ)も追加したという具合です。

親テーマのテンプレートファイルを子テーマ内でカスタマイズ

次は投稿ページや固定ページの表示を担当している PHP テンプレートファイルを編集します。

このテンプレートは本文の表示の他に、SNSボタンやウィジェットの表示を制御している箇所です。なのでここをトップページの場合は本文だけを表示するように処理を変更します。

これも子テーマ内で上書き処理できるようになっているのですが、まずはこのように下準備をします。

# Cocoon の子テーマに移動
$ cd wp-content/themes/cocoon-child-master

# 子テーマ内に tmp ディレクトリを作る
$ mkdir tmp

# 親テーマから content.php を取ってきて tmp 内に保存する
$ cp ../cocoon-master/tmp/content.php tmp/

# content.php を編集
$ vi tmp/content.php

上記は Linux のコマンドライン操作を例に記述していますが、FTP 等でやる場合は置き換えてください。

content.php には下記のハイライトした箇所を追加していきます。

■ 15行目付近

<article id="post-<?php the_ID(); ?>" <?php post_class('article') ?> itemscope="itemscope" itemprop="blogPost" itemtype="https://schema.org/BlogPosting">
  <?php
  if ( have_posts() ) {
    while ( have_posts() ) {
      the_post(); ?>

      <?php if ( ! is_front_page() ): ?>

      <?php //タイトル上の広告表示
      if (is_ad_pos_above_title_visible() && is_all_adsenses_visible()){

■ 76行目付近

          <?php dynamic_sidebar( 'page-content-top' ); ?>
        <?php endif; ?>

      </header>

      <?php endif; ?>

      <div class="entry-content cf<?php echo get_additional_entry_content_classes(); ?>" itemprop="mainEntityOfPage">
      <?php //記事本文の表示
        the_content(); ?>
      </div>

      <?php if ( ! is_front_page() ): ?>

      <?php //マルチページ用のページャーリンク
      get_template_part('tmp/pager-page-links'); ?>

      <?php endif; ?>

      <footer class="article-footer entry-footer">

      <?php if ( ! is_front_page() ): ?>

■ 149行目付近

        <?php //投稿者等表示用のテンプレート
        get_template_part('tmp/footer-meta'); ?>

        <?php endif; ?>

        <!-- publisher設定 -->

これで PHP 側は完成です。

CSSの調整

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

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

.main {
        padding: 9px 29px;
}

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

トップページの作り方

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

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

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

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

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

外部リンク

Cocoon公式サイト

コメント

  1. ゆういち より:

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

    • miura より:

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

コメントを残す

よく読まれている記事

  • 本日
  • 週間
  • 月間