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管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法

    良く使うWordPress管理画面の投稿一覧ですが標準の表示項目は以下の7個です。通常のブログならカスタマイズする必要もないのでしょうが

    記事を読む

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

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

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

    記事を読む

    著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

    ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本文へと読み進みみたくなる要素の一つでありSNSでシェアされた時に目を引

    記事を読む

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

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

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

    記事を読む

    meta_robots タグ設定

    プラグイン「wordpress meta robots」を止めてカスタムフィールドで対応した方法

    SEO対策の一つ「低品質コンテンツの対応」として、投稿ページや固定ページ単位にmeta robotsタグが設定できるプラグイン「word

    記事を読む

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

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

    投稿ページや固定ページに直接phpコードが書けるプラグイン「Exec-PHP」は、セキュリティ面に問題があるようなので使わない方が良い。

    記事を読む

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

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

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

    記事を読む

    ワードプレステーマ wsc7

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

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

    記事を読む

    wordpress プラグイン

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

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

    記事を読む

    ワードプレスタイトル

    WordPress テンプレート ページ別にタイトル(title)・見出し(h1/h2)・メタの各タグは何を書くべき?

    二つ前の記事「WordPressの仕組みを理解する」でも書いたが、WordPressのテンプレートファイルは、ざっくり以下の6パターン、

    記事を読む

    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」を触

    →もっと見る