WordPressテーマ『mono-lab | CUBIC』を少しカスタマイズしてみた

公開日： 2013/10/11 最終更新日：2015/09/12

wpテーマ-cubic
現在はStinger3で運用しています。
~~このブログは（モノラボ）mono-lab | CUBIC というテーマを使っています。~~GPLライセンスの元で著作権表示することを条件に無料で配布されているテーマです。WordPress管理画面の外観からテーマオプションで表示項目の設定ができるし、ウィジェットやメニューに対応しており、固定ページもノーマルパターン、サイドメニュー無し、コメント欄無し、両方なしと４種類のパターン用意されているので使い易いテーマだと思います。そのまま使っても充分なテーマですが、WordPressのテーマカスタマイズの勉強がてら少しカスタマイズしてみましたのでカスタマイズ箇所の覚え書きとして残しておきます。

スポンサードリンク

カスタマイズした箇所

タイトルタグ（title）とメタタグ（meta description）

タイトルタグ（title）が、トップページの場合は「サイトタイトル＋サイトキャッチフレーズ」となっていたがサイトキャッチフレーズをカットした。

全ページのメタタグ（meta description）にサイトキャッチフレーズをセットしていたので、トップページの時だけセットするようにした。ついでにアーカイブのタグページはインデックスされないように”noindex”を追加した。

対象テンプレートファイル：header.php

【変更前コード】

<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'); ?>" />

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

【変更後コード】

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

<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()): ?>

<?php endif; ?>

個別ページの「h1タグ」の位置

全てのページでサイトタイトルにh1タグがついているので個別投稿ページと固定ページの時は投稿タイトルにh1タグを変更した。ロゴ画像は使っていないのでテキストの時だけ対応した。

対象テンプレートファイル：functions/header-logo.php
【変更前コード】

/**
* フロントページにロゴを表示する
*/
function the_dp_logo(){
$logo = dp_logo_to_display();
if($logo){
$option = get_cubic_option(); //オプションの値を取得
$title = get_bloginfo('name');
$url = home_url();
echo &lt;&lt;&lt;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";
}
}

/**

* フロントページにロゴを表示する

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>

EOS;

}else{

echo '

<h1 id="logo">'.get_bloginfo('name')."</h1>

\n";

}

【変更後コード】

/**
* フロントページにロゴを表示する
*/
function the_dp_logo(){
$logo = dp_logo_to_display();
if($logo){
$option = get_cubic_option(); //オプションの値を取得
$title = get_bloginfo('name');
$url = home_url();
echo &lt;&lt;&lt;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";
}
}

/**

* フロントページにロゴを表示する

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>

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
【追加したコード】

<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();?>&amp;layout=button_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;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>

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

</div>

</div>

google+ボタンはヘッダーでjsファイルの読み込みが必要
対象テンプレートファイル：header.php
【追加したコード】

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'}</script>

1	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'}</script>

アイキャッチ画像を利用

アイキャッチ画像を使えるようにするために、「functions.php」にコードを追加し、アイキャッチ画像を表示するページのテンプレートファイルを変更した。
対象テンプレートファイル：functions.php
【追加したコード】

// アイキャッチ画像
function mysetup() {
	add_theme_support( 'post-thumbnails' );// 機能の宣言
}
add_action( 'after_setup_theme', 'mysetup' );

// アイキャッチ画像

function mysetup() {

add_theme_support( 'post-thumbnails' );// 機能の宣言

}

add_action( 'after_setup_theme', 'mysetup' );

対象テンプレートファイル：index.php
【変更前コード】

<div class="post_content cf">
   <?php the_content(__('Read more', 'cubic')); ?>
   <?php wp_link_pages(); ?>
  </div>

<?php the_content(__('Read more', 'cubic')); ?>

<?php wp_link_pages(); ?>

</div>

【変更後コード】

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

<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

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

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

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

パンくずリストを別途設置

このテーマ「mono-lab | CUBIC」は、テーマオプションでパンくずリストが表示できるようになっていますが、googleの検索結果にパンくずリストを表示するために、別途パンくずリストを設置しました。
やり方は「 [Я]パンくずリストをGoogle検索結果にも表示・反映させる方法」を参考にしました。