WordPressテーマ『mono-lab | CUBIC』を少しカスタマイズしてみた
公開日:
最終更新日:2015/09/12
現在はStinger3で運用しています。
このブログは(モノラボ)mono-lab | CUBIC というテーマを使っています。GPLライセンスの元で著作権表示することを条件に無料で配布されているテーマです。WordPress管理画面の外観からテーマオプションで表示項目の設定ができるし、ウィジェットやメニューに対応しており、固定ページもノーマルパターン、サイドメニュー無し、コメント欄無し、両方なしと4種類のパターン用意されているので使い易いテーマだと思います。そのまま使っても充分なテーマですが、WordPressのテーマカスタマイズの勉強がてら少しカスタマイズしてみましたのでカスタマイズ箇所の覚え書きとして残しておきます。
カスタマイズした箇所
タイトルタグ(title)とメタタグ(meta description)
対象テンプレートファイル:header.php
【変更前コード】
1 2 3 4 5 6 |
<title><?php global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' ); $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'cubic' ), max( $paged, $page ) ); ?></title> <meta name="description" content="<?php echo bloginfo('description'); ?>" /> |
【変更後コード】
1 2 3 4 5 6 7 8 9 10 |
<title><?php global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' ); $site_description = get_bloginfo( 'description', 'display' ); if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'cubic' ), max( $paged, $page ) ); ?> </title> <?php if ( $site_description && ( is_home() || is_front_page() ) ) echo '<meta name="description" content="' . $site_description. '" />' ; ?> <?php if(is_tag()): ?> <meta name="robots" content="noindex" /> <?php endif; ?> |
個別ページの「h1タグ」の位置
全てのページでサイトタイトルにh1タグがついているので個別投稿ページと固定ページの時は投稿タイトルにh1タグを変更した。ロゴ画像は使っていないのでテキストの時だけ対応した。
対象テンプレートファイル:functions/header-logo.php
【変更前コード】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * フロントページにロゴを表示する */ function the_dp_logo(){ $logo = dp_logo_to_display(); if($logo){ $option = get_cubic_option(); //オプションの値を取得 $title = get_bloginfo('name'); $url = home_url(); echo <<<EOS <h1 id="logo" style="top: {$option['logotop']}px; left: {$option['logoleft']}px;"> </h1> EOS; }else{ echo ' <h1 id="logo">'.get_bloginfo('name')."</h1> \n"; } } |
【変更後コード】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/** * フロントページにロゴを表示する */ function the_dp_logo(){ $logo = dp_logo_to_display(); if($logo){ $option = get_cubic_option(); //オプションの値を取得 $title = get_bloginfo('name'); $url = home_url(); echo <<<EOS <h1 id="logo" style="top: {$option['logotop']}px; left: {$option['logoleft']}px;"> </h1> EOS; } elseif ( is_single() ){ echo ' <p id="logo">'.get_bloginfo('name')."</p> \n"; } elseif ( is_page() ){ echo ' <p id="logo">'.get_bloginfo('name')."</p> \n"; } elseif ( is_home() ){ echo ' <h1 id="logo">'.get_bloginfo('name')."</h1> \n"; } else { echo ' <h1 id="logo">'.get_bloginfo('name')."</h1> \n"; } } |
SNSボタンを設置
ソーシャルボタンですがプラグインは使わずに個別投稿ページと固定ページにSNSボタンを設置しました。
対象テンプレートファイル:single.php page.php
【追加したコード】
1 2 3 4 5 6 7 8 9 |
<div class="social_btn cf"> <div class="hatena"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div> <div class="twitter"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> <div class="facebook"> <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink();?>&layout=button_count&show_faces=false&width=50&action=like&colorscheme=light&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe></div> <div class="google"><g:plusone size="Medium"></g:plusone></div> </div> |
google+ボタンはヘッダーでjsファイルの読み込みが必要
対象テンプレートファイル:header.php
【追加したコード】
1 |
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'}</script> |
アイキャッチ画像を利用
アイキャッチ画像を使えるようにするために、「functions.php」にコードを追加し、アイキャッチ画像を表示するページのテンプレートファイルを変更した。
対象テンプレートファイル:functions.php
【追加したコード】
1 2 3 4 5 |
// アイキャッチ画像 function mysetup() { add_theme_support( 'post-thumbnails' );// 機能の宣言 } add_action( 'after_setup_theme', 'mysetup' ); |
対象テンプレートファイル:index.php
【変更前コード】
1 2 3 4 |
<div class="post_content cf"> <?php the_content(__('Read more', 'cubic')); ?> <?php wp_link_pages(); ?> </div> |
【変更後コード】
1 2 3 4 5 6 7 8 9 10 11 |
<div class="post_content cf"> <span class="post_thumbnail_index"><?php if (has_post_thumbnail()) { the_post_thumbnail(); }else { echo ''; } ?> </span> <?php the_content(__('Read more', 'cubic')); ?> <?php wp_link_pages(); ?> </div> |
上記コードと同じ要領でアーカイブ(カテゴリー・タグ)ページ、個別投稿ページ、固定ページにアイキャッチ画像の表示を追加した。
個別投稿ページに関連記事を表示
個別投稿ページに同じタグが付いた関連記事をリスト表示するようにした。
対象テンプレートファイル:single.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<div id="relation"> <h3>関連記事</h3> <ul> <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); $tagIDs = array(); if ($tags) { $tagcount = count($tags); for ($i = 0; $i < $tagcount; $i++) { $tagIDs[$i] = $tags[$i]->term_id; } $args=array( 'tag__in' => $tagIDs, 'post__not_in' => array($post->ID), 'showposts'=>6, 'caller_get_posts'=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <li> <a href="<?php echo esc_html( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>" > <?php if( has_post_thumbnail() ) { ?> <?php /*\n . the_post_thumbnail( array( $width , $height ),array( 'alt' => $title_attr , 'title' => $title_attr ));*/ ?> <?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id); $thumb_url = $thumb_url[0]; ?> <img src="<?php echo esc_attr( $thumb_url ); ?>" width="64" height="64" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" /> <?php } else { ?> <img src="<?php echo esc_attr( no_thumb_image() ); ?>" width="64" height="64" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" /> <?php } ?> </a> <div class="date"><?php the_time(__('m/d. Y', 'cubic')) ?></div> <h4 class="title"> <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a> </h4> </li> <?php endwhile; wp_reset_query(); ?> <?php } else { ?> <p>関連する記事は見当たりません…</p> <?php } } ?> </ul> </div><!-- /#relation --> |
パンくずリストを別途設置
このテーマ「mono-lab | CUBIC」は、テーマオプションでパンくずリストが表示できるようになっていますが、googleの検索結果にパンくずリストを表示するために、別途パンくずリストを設置しました。
やり方は「 [Я]パンくずリストをGoogle検索結果にも表示・反映させる方法」を参考にしました。
見栄えを気にして他にやったこと
まとめ
SEO的に個別投稿ページや固定ページのh1タグは投稿名が良さそうなので少しカスタマイズしてみました。他に行った事は見栄えに関連する部分が殆どです。掲載しているコードは自己流で書いてますので、ご利用の際は自己責任でお願いします。
AD
関連記事
-
-
Exec-PHPを使わずに投稿ページや固定ページでphpを使いたい
投稿ページや固定ページに直接phpコードが書けるプラグイン「Exec-PHP」は、セキュリティ面に問題があるようなので使わない方が良い。
-
-
「Stinger3」に1カラム テンプレートを追加する方法
このブログで使っているテーマ「Stinger3」はメインコンテンツ領域(横幅)が550pxとやや狭いです。いろんな方が横幅を広げるカスタ
-
-
WordPressの固定ページで投稿タグが設定できるようにするfunction.phpのコードサンプル
WordPressの固定ページはデフォルトでは投稿タグを設定することができません。固定ページを1カラムのランディングページとして使う場合
-
-
著作権表示が要らない素材サイト「pixabay」が使えるプラグイン
ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本文へと読み進みみたくなる要素の一つでありSNSでシェアされた時に目を引
-
-
カテゴリーページや投稿タグページに入力した説明文を反映させる方法
WordPressのテーマではカテゴリーページや投稿タグページに各々の編集画面で入力した説明文を表示するテーマは少ないのですが、今回入力
-
-
プラグイン「wordpress meta robots」を止めてカスタムフィールドで対応した方法
SEO対策の一つ「低品質コンテンツの対応」として、投稿ページや固定ページ単位にmeta robotsタグが設定できるプラグイン「word
-
-
簡単に自分のパソコン(PC)にWordPress開発環境を作る方法
ワードプレス(Wordpress)で既に稼働中サイトのテーマをカスタマイズする時に直接テーマファイルを触るのは危険です。別途サーバー上に
-
-
プラグイン『Meta Manager』の使い方と注意点
WordPressでSEO対策用プラグインの『ALL in One SEO Pack』は機能が豊富すぎて使いきれないので、メタタグのDe
-
-
プラグイン『ALL in One SEO Pack』って使う必要はあるのか?
WordPressでSEO対策としてTITLEタグとメタタグのDescriptionとkeywordsをページ単位に設定できるプラグイン
-
-
WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法
良く使うWordPress管理画面の投稿一覧ですが標準の表示項目は以下の7個です。通常のブログならカスタマイズする必要もないのでしょうが