支援者募集中!仕事依頼はこちら

Cocoonカスタマイズ!SEOに強いオリジナルトップページを作る!【構築編】

Cocoonトップページカスタマイズ Cocoon

こんにちは、ぽんひろ(@ponhiroo)です。

今回はCocoonのトップページカスタマイズの紹介になります!

固定ページを使ってオリジナルのトップページを作ります。

この記事は構築編なのでデザイン編とセットでお読みください。

あわせて Cocoonトップページカスタマイズ!オシャレなカテゴリー切り替えタブを作る!【デザイン編】

Cocoonトップページカスタマイズ!オシャレなカテゴリー切り替えタブを作る!【デザイン編】
Cocoonトップページカスタマイズです。有料WordPressテーマのJINやSANGOのようなタブ切り替え機能をCocoonのトップページにも作ってみました。グラデーションを使ったデザインでオシャレにしてみました。意外と簡単に作れるので試してみてね!

完成イメージはデモページをご覧ください。

構築編ではSEOに強いトップページを作っていきます。

注意 カスタマイズする前に必ずバックアップをしてください。

編集するファイルたち
  • style.css
  • function.php
  • content.php(必要な人だけ)

Cocoonでオリジナルのトップページを作る方法

手順は以下の通りです。

手順
  1. 固定ページを新規作成
  2. 目次と広告を非表示設定
  3. CSSを追記
  4. 固定ページをトップページに設定

固定ページを新規作成しよう!

まずは固定ページを作成していきます。

固定ページ→新規追加」を選択!

タイトルとパーマリンクは入力、変更しないで大丈夫です。

仮で下記コードをテキストエディタにコピペ!

[new_list count="6" type="large_thumb" cats="all" children="0" post_type="post"]
<p style="text-align: center;margin:1em 0;"><a class="btn btn-red btn-m" href="カテゴリURL">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></p>

デザイン編で変更するので表示が確認できればOKです。

目次と広告を非表示設定

広告はどちらでもいいですがトップページに目次があるのはおかしいので非表示に設定します。

固定ページ編集画面に設定できる箇所があります。

広告、目次非表示設定

チェックを入れたら公開しましょう!

トップページ用のCSSを追記

CSSでレイアウトとデザインを整えます。

WordPress管理画面→外観→テーマエディター→style.css」を開きます。

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

の下にコードをコピペしていってください。

/************************************
** トップページカスタマイズ
************************************/
/*カードタイプデフォルトの画像*/
.home #main .widget-entry-cards figure {
	max-width: 280px;
	width: 100%;
}
@media screen and (max-width: 480px) {
	.home #main .widget-entry-cards figure {
		width: 130px;
	}
}
/*カードタイプデフォルトのタイトル*/
.home #main .new-entry-card-title, .home #main .popular-entry-card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.7;
	color: #555;
}
/*カードタイプlarge-thumb、large-thumb-onを横並びに*/
.home #main .large-thumb, .home #main .large-thumb-on {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
/*カードタイプlarge-thumb、large-thumb-onの横幅を50%に*/
.home #main .large-thumb a, .home #main .large-thumb-on a {
	width: 50%;
}
.home #main .large-thumb a:nth-child(even), .home #main .large-thumb-on a:nth-child(even) {
	margin: 0;
}
.home #main .large-thumb .new-entry-cards {
	margin: 0;
}
/*カードタイプlarge-thumb、large-thumb-onの画像*/
.home #main .widget-entry-cards.not-default figure {
	width: 100%;
}
/*カードタイプlarge-thumbのタイトル*/
.home #main .large-thumb .new-entry-card-title {
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.7;
	color: #555;
}
/*480px以下(スマホ用)*/
@media screen and (max-width: 480px) {
	.home #main .large-thumb, .home #main .large-thumb-on {
		-webkit-box-orient: column;
		-webkit-box-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		margin: 0;
	}
	.home #main .large-thumb a, .home #main .large-thumb-on a {
		width: 100%;
	}
	.home #main .new-entry-card-title, .home #main .popular-entry-card-title {
		font-size: 0.9em;
	}
	.e-card-title {
		font-size: 0.8em;
		line-height: 1.7;
	}
}

固定ページをトップページに設定

WordPress管理画面→設定→表示設定」を開きます。

ホームページの表示で固定ページを選択し、先ほど作成したページを選択します。

固定ページをトップページへ

変更を保存で完成です!

トップページからSNSボタンなど必要ないものを削除

好みによりますがSNSボタン、投稿・更新時間、著者情報を消したい場合もあるかと思います。

トップページ不要なもの1

あったほうが良いという方はそのままでOKなのですが、消す方も消さない方もCocoonの特性上SEOの関係で修正すべきことがあります。

ですので、まずはこちらから解説します。

SEOのためにh1を修正する

SEOに不利にならないために修正すべきことがあります。

それは「h1」のです。

Cocoonの現在の仕様では固定ページをトップページにすると、固定ページのタイトルがh1になります。

ですが、タイトルは入れてないのでh1はなくなってしまっています。

タイトルを入力すればタイトルが表示され、そこにh1がつくのですがトップページなのでタイトルは入れ図にサイト名にh1がいいですよね。

まずは下記コードをfunction.phpにコピペしてください。

//Cocoonトップページh1タグ表示
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;
}

 

ついでにSNS、投稿日時、著者情報を消す

いらない情報を消す方法は二通りあります。

一つはCSSで消す方法。一つはコードを変更する方法です。

簡単なのはCSSです。が、CSSで消す場合、もしかしたらSEOに不利になる可能性がわずかにあります。

理由は「display none seo」でググってみてください。

Cocoonでも普通に使われており恐らく気にするレベルではないのですが、気になる方は後者でやってください。

追記 2019/06/21

CSSで消す方法は現状非推奨とさせていただきます。

CSSで消す方法(非推奨)

style.cssに下記コードをコピペしてください。

/*非表示設定*/
.home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{
  display: none;
}

content.phpを変更する方法

CSSのみの変更はh1タグが重複してしまうためSEO上よくありません。

ですので、content.phpを編集してh1を一つにし、さらにいらない項目を消します。

こちらの方法は少し面倒なのでファイルをダウンロードできるようにしました。

ダウンロード

ダウンロードしたファイル(tmp/content.php)を子テーマ(cocoon-child-master)にフォルダごとそのまま入れてください。

○ファイルの入れ方

  1. FTPソフトを使ってサーバーに接続
  2. 子テーマを開く(ドメイン/public_html/wp-content/themes/cocoon-child-master)
  3. ダウンロードしたファイルをアップロード

外観→テーマエディターにtmpが追加されていればOKです。

自分でやりたいかたは



親テーマ(cocoon-master)からtmpの中にあるcontent.phpを子テーマにコピーします。

その時tmpというフォルダを作ってその中に入れてください。

content.phpのコードはこちら↓

<?php //投稿・固定ページ本文
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit; ?>

<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()){
        get_template_part_with_ad_format(get_ad_pos_above_title_format(), 'ad-above-title', is_ad_pos_above_title_label_visible());
      }; ?>

      <?php //投稿タイトル上ウイジェット
      if ( is_single() && is_active_sidebar( 'above-single-content-title' ) ): ?>
        <?php dynamic_sidebar( 'above-single-content-title' ); ?>
      <?php endif; ?>

      <header class="article-header entry-header">
        <h1 class="entry-title" itemprop="headline">
          <?php
          if (is_wpforo_plugin_page()) {
            echo wp_get_document_title();
          } else {
            the_title();
          }
           ?>
        </h1>

        <?php //タイトル下の広告表示
        if (is_ad_pos_below_title_visible() && is_all_adsenses_visible()){
          get_template_part_with_ad_format(get_ad_pos_below_title_format(), 'ad-below-title', is_ad_pos_below_title_label_visible());
        }; ?>

        <?php //投稿タイトル下ウイジェット
        if ( is_single() && is_active_sidebar( 'below-single-content-title' ) ): ?>
          <?php dynamic_sidebar( 'below-single-content-title' ); ?>
        <?php endif; ?>

        <?php //アイキャッチ挿入
        get_template_part('tmp/eye-catch'); ?>

        <?php //SNSシェアボタン
        if (is_sns_top_share_buttons_visible())
          get_template_part_with_option('tmp/sns-share-buttons', SS_TOP); ?>


        <?php //投稿日と更新日テンプレート
        get_template_part('tmp/date-tags'); ?>

        <?php if (is_content_read_time_visible() && is_the_page_read_time_visible() && !is_plugin_fourm_page()): ?>
          <div class="read-time"><?php echo '<span class="fa fa-hourglass-half"></span>
'.sprintf(__( 'この記事は<span class="bold">約%s分</span>で読めます。', THEME_NAME ), get_time_to_content_read(get_the_content())); ?></div>
        <?php endif; ?>

         <?php //本文上の広告表示
        if (is_ad_pos_content_top_visible() && is_all_adsenses_visible()){
          get_template_part_with_ad_format(get_ad_pos_content_top_format(), 'ad-content-top', is_ad_pos_content_top_label_visible());
        }; ?>

        <?php //投稿本文上ウイジェット
        if ( is_single() && is_active_sidebar( 'single-content-top' ) ): ?>
          <?php dynamic_sidebar( 'single-content-top' ); ?>
        <?php endif; ?>

        <?php //固定ページ本文上ウイジェット
        if ( is_page() && is_active_sidebar( 'page-content-top' ) ): ?>
          <?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() ): ?>
        <?php //投稿本文下ウイジェット
        if ( is_single() && is_active_sidebar( 'single-content-bottom' ) ): ?>
          <?php dynamic_sidebar( 'single-content-bottom' ); ?>
        <?php endif; ?>

        <?php //固定ページ本文下ウイジェット
        if ( is_page() && is_active_sidebar( 'page-content-bottom' ) ): ?>
          <?php dynamic_sidebar( 'page-content-bottom' ); ?>
        <?php endif; ?>

        <?php //カテゴリー・タグ
        get_template_part('tmp/categories-tags'); ?>

        <?php //本文下の広告表示
        if (is_ad_pos_content_bottom_visible() && is_all_adsenses_visible()){
          //レスポンシブ広告のフォーマットにrectangleを指定する
          get_template_part_with_ad_format(get_ad_pos_content_bottom_format(), 'ad-content-bottom', is_ad_pos_content_bottom_label_visible());
        }; ?>

        <?php //SNSシェアボタン上の広告表示
        if (is_ad_pos_above_sns_buttons_visible() && is_all_adsenses_visible()){
          get_template_part_with_ad_format(get_ad_pos_above_sns_buttons_format(), 'ad-above-sns-buttons', is_ad_pos_above_sns_buttons_label_visible());
        }; ?>

        <?php //投稿SNSボタン上ウイジェット
        if ( is_single() && is_active_sidebar( 'above-single-sns-buttons' ) ): ?>
          <?php dynamic_sidebar( 'above-single-sns-buttons' ); ?>
        <?php endif; ?>

        <?php //固定ページSNSボタン上ウイジェット
        if ( is_page() && is_active_sidebar( 'above-page-sns-buttons' ) ): ?>
          <?php dynamic_sidebar( 'above-page-sns-buttons' ); ?>
        <?php endif; ?>

        <?php //SNSシェアボタン
        if (is_sns_bottom_share_buttons_visible())
          get_template_part_with_option('tmp/sns-share-buttons', SS_BOTTOM); ?>

        <?php //SNSフォローボタン
        if (is_sns_follow_buttons_visible())
        get_template_part_with_option('tmp/sns-follow-buttons', SF_BOTTOM); ?>

        <?php //SNSシェアボタン上の広告表示
        if (is_ad_pos_below_sns_buttons_visible() && is_all_adsenses_visible()){
          get_template_part_with_ad_format(get_ad_pos_below_sns_buttons_format(), 'ad-below-sns-buttons', is_ad_pos_below_sns_buttons_label_visible());
        }; ?>

        <?php //投稿SNSボタン下ウイジェット
        if ( is_single() && is_active_sidebar( 'below-single-sns-buttons' ) ): ?>
          <?php dynamic_sidebar( 'below-single-sns-buttons' ); ?>
        <?php endif; ?>

        <?php //固定ページSNSボタン下ウイジェット
        if ( is_page() && is_active_sidebar( 'below-page-sns-buttons' ) ): ?>
          <?php dynamic_sidebar( 'below-page-sns-buttons' ); ?>
        <?php endif; ?>

        <?php //投稿者等表示用のテンプレート
        get_template_part('tmp/footer-meta'); ?>
<?php endif; ?>
        <!-- publisher設定 -->
        <?php
        $home_image_url = get_amp_logo_image_url();
        $size = get_image_width_and_height($home_image_url);
        $width = isset($size['width']) ? $size['width'] : 600;
        $height = isset($size['height']) ? $size['height'] : 60;

        $sizes = calc_publisher_image_sizes($width, $height);
        $width = $sizes ? $sizes['width'] : 600;
        $height = $sizes ? $sizes['height'] : 60;
         ?>
        <div class="publisher" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
            <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
              <img src="<?php echo $home_image_url; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" alt="">
              <meta itemprop="url" content="<?php echo $home_image_url; ?>">
              <meta itemprop="width" content="<?php echo $width; ?>">
              <meta itemprop="height" content="<?php echo $height; ?>">
            </div>
            <div itemprop="name"><?php bloginfo('name'); ?></div>
        </div>
      </footer>

    <?php
    } // end while
  } //have_posts end if ?>
</article>

 

こちらのサイトを参考にさせてもらっています。

これでオリジナルトップページの構築は完了!続きはデザイン編へ

これでトップページの準備ができたので続きはデザイン編をご覧ください。

あわせて Cocoonトップページカスタマイズ!オシャレなカテゴリー切り替えタブを作る!【デザイン編】

Cocoonトップページカスタマイズ!オシャレなカテゴリー切り替えタブを作る!【デザイン編】
Cocoonトップページカスタマイズです。有料WordPressテーマのJINやSANGOのようなタブ切り替え機能をCocoonのトップページにも作ってみました。グラデーションを使ったデザインでオシャレにしてみました。意外と簡単に作れるので試してみてね!

ここまでご覧いただきありがとうございます。

Cocoonカスタマイズ他にもやってます!

他にもいろいろCocoonカスタマイズをやってますので良かったらご覧ください!

あわせて読む Cocoonカスタマイズをまとめ!おしゃれなものや機能性をあげるものなど!

Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

  1. はじめまして。

    Cocoonカスタマイズの記事、いつも参考にさせてもらっています。
    この記事で紹介されているCocoonのnew_list機能なのですが、これで表示される記事の一覧を、デフォルトのトップページで表示される最新記事インデックスのカード風にできないでしょうか?

    CSSで実現できないかと頑張っていたのですが、つい先日ようやくCSSを勉強し始めたところで、なかなかうまくいきません。

    よろしければご教授いただければ幸いです。

    • >hrtさん

      コメントありがとうございます。
      デフォルトのカード風とは本文と日付が表示されてるものですかね?違ったらすみません。

      その場合、PHPを変更しないと難しいかもしれません。

      こちらのサイトにやり方が書いてありますね
      https://neverendworks.com/news/creation-of-new-articles-list-with-excerpts/

      ちなみに日付だけだったらCSSで表示できそうです

  2. >ぽんひろさん
    回答ありがとうございます。

    テーマのアップデートで使えなくなる可能性もあったりと、一筋縄ではいかなさそうですね。

    まずはぽんひろさんのブログで紹介されている形でやってみて、おいおい考えてみたいと思います。
    ありがとうございました!

    • >hrtさん

      なるべくPHPはいじりたくないですよね。

      Cocoonの公式フォーラムに書き込めばもしかしたら要望に応えてくれるかもしれません!

  3. 詳しい解説ありがとうございます。

    1点質問なのですが、tmp/content.phpを入れるとアイキャッチが非表示になってしまいます。

    アイキャッチを残すことはできますか?

    お忙しい中申し訳ありませんが、お時間のある時にご教示いただけましたら幸いです。

    • >さくらさん

      返信遅くなってすみません!

      アイキャッチは非表示にならないはずなのでどこか別の理由で非表示になってるのかもしれません。

      他は問題なく表示されているのでしょうか?

ページトップへ