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

公開日: 最終更新日:2015/09/12

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

スポンサードリンク

カスタマイズした箇所

タイトルタグ(title)とメタタグ(meta description)

  • タイトルタグ(title)が、トップページの場合は「サイトタイトル+サイトキャッチフレーズ」となっていたがサイトキャッチフレーズをカットした。
  • 全ページのメタタグ(meta description)にサイトキャッチフレーズをセットしていたので、トップページの時だけセットするようにした。ついでにアーカイブのタグページはインデックスされないように”noindex”を追加した。
  • 対象テンプレートファイル:header.php

    【変更前コード】

    【変更後コード】

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

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

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

    【変更後コード】

    SNSボタンを設置

    ソーシャルボタンですがプラグインは使わずに個別投稿ページと固定ページにSNSボタンを設置しました。
    対象テンプレートファイル:single.php page.php
    【追加したコード】

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

    アイキャッチ画像を利用

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

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

    【変更後コード】

    上記コードと同じ要領でアーカイブ(カテゴリー・タグ)ページ、個別投稿ページ、固定ページにアイキャッチ画像の表示を追加した。

    個別投稿ページに関連記事を表示

    個別投稿ページに同じタグが付いた関連記事をリスト表示するようにした。
    対象テンプレートファイル:single.php

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

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

    見栄えを気にして他にやったこと

  • プラグインを利用しサイドエリアに新規投稿記事をアイキャッチ画像付きで表示
  • 個別投稿ページの見出しタグ(hx)をCSSで装飾
  • まとめ

    SEO的に個別投稿ページや固定ページのh1タグは投稿名が良さそうなので少しカスタマイズしてみました。他に行った事は見栄えに関連する部分が殆どです。掲載しているコードは自己流で書いてますので、ご利用の際は自己責任でお願いします。

    Post Categories: Wordpress  Tags:

    AD

    関連記事

    Exec-PHPを使わずに投稿ページや固定ページでphpを使う

    WordPressの固定ページの拡張子にhtmlをつけるfunction.phpのコードサンプル

    WordPressを始めた頃にパーマリンク設定で悩んだこともあった。拡張子.htmlが付いた静的ページっぽい方がSEO的にも優位なのでは

    記事を読む

    ワードプレステーマ wsc7

    レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

    Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。 2011年10月25日にリリ

    記事を読む

    Exec-PHPを使わずに投稿ページや固定ページでphpを使う

    カテゴリーページや投稿タグページに入力した説明文を反映させる方法

    WordPressのテーマではカテゴリーページや投稿タグページに各々の編集画面で入力した説明文を表示するテーマは少ないのですが、今回入力

    記事を読む

    ワードプレス ページング・ページネーション(wordpress paging)

    プラグインを使わずに自分でページングを実装するfunction.phpのコードサンプル

    Wordpressで選んだテーマにページング機能が付いていない場合は「WP-PageNavi」というプラグインを使うか、該当テーマ内のテ

    記事を読む

    all-in-one-seo

    プラグイン『ALL in One SEO Pack』って使う必要はあるのか?

    WordPressでSEO対策としてTITLEタグとメタタグのDescriptionとkeywordsをページ単位に設定できるプラグイン

    記事を読む

    stinger3 1カラムテンプレートサンプル

    「Stinger3」に1カラム テンプレートを追加する方法

    このブログで使っているテーマ「Stinger3」はメインコンテンツ領域(横幅)が550pxとやや狭いです。いろんな方が横幅を広げるカスタ

    記事を読む

    wordpressテーマ stinger3

    人気のWordPress無料テーマ「Stinger3」に変えてみた

    ブログのテーマをスマホ対応済の人気無料テーマ「Stinger3」に変更しました。 一つ前に適用していたモノラボさんのテーマ CUBIC

    記事を読む

    Exec-PHPを使わずに投稿ページや固定ページでphpを使う

    WordPressの固定ページで投稿タグが設定できるようにするfunction.phpのコードサンプル

    WordPressの固定ページはデフォルトでは投稿タグを設定することができません。固定ページを1カラムのランディングページとして使う場合

    記事を読む

    wordpress プラグイン

    WordPressで記事を書き始める前に入れた方がいいプラグイン

    ワードプレスのインストールが無事終わったら、早速記事を書いてどの様に表示されるのか試してみたくなりますが、その前に最初に設置・設定してお

    記事を読む

    wordpress_logo04

    WordPressの仕組みを理解する

    WordPress(ワードプレス)は、深く仕組みを知らなくても簡単にブログやWebサイトが作れるようになっています。大概のレンタルサーバ

    記事を読む

    Message

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    *

    AD

    WordPress(ワードプレス)も SEO(エスイーオー)も、今一つ解らない、アラフィフおやじのWeb勉強ノート

    ・なんでやねん?
    ・忘れたらアカン!
    ・えらいこっちゃ !!

    などなど、諸々かきつけていきます。

    livedoor-reader-btn
    follow us in feedly
    著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

    ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本

    Wordpress パソコン開発環境構築の記事
    簡単に自分のパソコン(PC)にWordPress開発環境を作る方法

    ワードプレス(Wordpress)で既に稼働中サイトのテーマをカス

    スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像
    スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

    スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する

    stinger3 1カラムテンプレートサンプル
    「Stinger3」に1カラム テンプレートを追加する方法

    このブログで使っているテーマ「Stinger3」はメインコンテンツ

    ワードプレステーマ wsc7
    レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

    Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触

    →もっと見る