ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

新しいWordPressテーマの特徴7つを大公開!SEO対策やメンテ性を向上!タブレットも特化

WordPressの新テーマ PC版

このブログのWordPressテーマ(デザインや機能)をゼロから作りなおしました。自作は昨年1月に次いで2度めなので、更に軽量化・修正のしやすさ・SEO対策を向上できたと思います。その特徴を7つにわけて紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

今回の新テーマ「ゆめぴょん v2」は前回のテーマの特徴やデザインを引き継いだ上で、更に無駄をはぶいたりコードの効率化を意識して作りました。前回テーマのPCとスマホの特徴などは下記事を参考にしてください。

【WordPress】新テーマデザインで96点達成!SEO対策・軽量化など7つの特徴をさらします【WordPress】新テーマデザインで96点達成!SEO対策・軽量化など7つの特徴をさらします31 shares

このブログのPC・タブレットで表示されるデザインを大幅に変更しました。今回は新テ…

【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法28 shares

スマホ用テーマデザインでサイト作成した時に実装した、表示の高速化に関するチップを…

この記事からわかるように、前回テーマはかなり高速化を意識して作成しました。それに比べると今回の新テーマは、少し高速化を犠牲にして、デザインやメンテ性を重視しています。

そして最大の特徴は、コードの超シンプル化です。ただシンプルや保守性を重視しすぎたため、WordPressというCMSを逸脱したような部分もありそうです(笑)

PHPの勉強もかねて、またWebサイトやサービスを作る土台としても使えるような作り方をしたつもりです。そんな人の参考になればうれしいです。

WordPressの新テーマの7つの特徴

前回テーマからの変更点ではなく、一般的なWordPressテーマとの比較として次のような特徴が挙げられます。

  1. レスポンシブではなく、スマホ・タブレット・PCの3段階デザイン
  2. スマホファーストで作成。パーツのウィジェット化。テーマ切替はなし
  3. メイン幅を広げて、フッター削除、サイドバー軽量化
  4. 回遊率アップ、直帰率の低下を目指すデザインと内部リンク
  5. 軽量化(共通コード使い回し。サムネイル統一。WPプラグイン削減)
  6. メンテ性の大幅向上(テーマファイルはindex.phpだけ)
  7. SEO対策(内部リンク、重複しないスニペット、noindex付与)

1点づつ解説していきます。ちなみに新テーマの最終確認や調整は、下のプラグインにお世話になりっぱなしでした。実際のサーバーで試せるので、かなりおすすめです。

【WordPress】Theme Test Driveプラグインでテーマ作成が捗る!テスト環境不要【WordPress】Theme Test Driveプラグインでテーマ作成が捗る!テスト環境不要

WordPressプラグイン「Theme Test Drive」を使えば、作成・…

1. スマホ・タブレット・PCの3段階デザイン

個人的にレスポンシブのデザインは、あまり好きではありません。学習コストがかかるし、コードの無駄や保守の難しさや、広告配置の不便さが気になるためです。ただしあらゆるデバイスに対応するには、やはりレスポンシブが最強だと思います。

前回は、スマホテーマと、PC/タブレット共通テーマの2つを、プラグインで切り替えていました。今回はそれにタブレット専用デザインを加えました。

スマホデザインでは、iPhone6など大きめのスマートフォンで見ても問題ないように作りました。逆に小さな液晶画面でもタッチしやすいように、リンク箇所は大きめに設計しました。

WordPressの新テーマ スマホ版

PCデザインでは、特にSEO対策を重視しました。またこれまであまりクリックされなかったリンクの多くを排除しました。

WordPressの新テーマ PC版

今回新しく作ったタブレット用デザインでは、読み込み時間を高速化するためと、メインコンテンツを重視するために、サイドバーをカテゴリーリンクのみにしました。

WordPressの新テーマ タブレット版

2. スマホファースト。パーツのウィジェット化。テーマ切替はなし

前回同様、今回テーマもスマホデザインから作りました。ただし、テーマファイルは、スマホ版もタブレット版もPC版も1つに集約しました。それにより、便利でお世話になったテーマ切替プラグインは不要になりました。

【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も

WordPressプラグイン「Multi Device Switcher」を使う…

スマホ、タブレット、パソコンなどのデバイス判定には、以前紹介した下のようなPHPの関数を使っています。デバイスについては順次追加していけます。

WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめWordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめ84 shares

スマホとPC・タブレットでのデザインや見栄えを変えるための判別方法を紹介します。…

スマホ版デザインを作る過程で、「プロフィール」「カテゴリーリスト」「新着記事の一覧」「人気記事の一覧」「ソーシャルボタン」などのコンテンツは、PHPでパーツ化しました。

そしてPC版ではサイドバーなどに、タブレット版では記事下に2列で表示しています。もちろん、PC>タブレット>スマホの順に、多くのパーツを配置しています。

この作り方は、WordPressの機能を逸脱してる気もしますが、標準のウィジェット化では対応しづらいか、無駄コードが発生してしまうため、PHPで独自に作成しました。今後可能ならWordPressのウィジェット化も考えてみます。

3. メイン幅を広げて、記事コンテンツを重視

かなり前からやりたかったのが、PC版のメインコンテンツの横幅を広げること。実はスタイルシートだけで簡単に可能だけど、いろんなパーツの見栄えが悪くなるため、これまで見おくっていました。

今回やっとメイン幅を広げることができました。それに伴い、文字の大きさ、改行の幅、横幅なども見やすく調整しました。

あまり重視されなくなったサイドバーの幅を狭くして、コンテンツも大幅に減らしました。クリック率の低かったフッターは完全になくしました。

4. 回遊率アップ、直帰率の低下を目指すデザインと内部リンク

これまでもブログの本文中のリンクは、結構クリックされてたようなのですが、記事外の内部リンクのクリック率はびっくりするほど低かったです。

直帰率もずっと横ばいなので、もう少し低下させたいと思っています。すなわち、ブログ内の回遊率アップです。

そのために、例えば次のような施策をデザインに仕込みました。

  • グローバルメニューの選定とデザイン
  • パンくずリスト、所属カテゴリーリンクを見やすく
  • 記事の途中に同一カテゴリーの人気記事リスト
  • 記事内で紹介したリンクを、記事下でまとめた
  • 記事下やフッターに、前の記事、次の記事へのリンク
  • 記事下に、関連記事や人気記事のリンク
  • 固定サイドバーに、手動と自動の人気記事リンク
  • 内部リンクなどに、はてブのようなshare数を表示
  • カテゴリ一覧のカウント数やシェア数をアプリ風に

上の中で、グローバルメニュー、人気記事、関連記事、前後の記事については、閲覧している記事のカテゴリーによって切り替えています。具体的にはカテゴリーごとに、関連カテゴリーを設定して、そこに所属する記事をリストアップしています。

はてブのようなshare数や、ソーシャルボタンのシェア数は、下記事で紹介したプラグインを利用しています。さらにバージョンアップしているので、追加記事も書く予定です。

シェア数の高速取得の決定版!WordPressプラグインSNS Count Cacheアップデートで進化シェア数の高速取得の決定版!WordPressプラグインSNS Count Cacheアップデートで進化

WordPressプラグインSNS Count Cacheについては前回紹介しま…

【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開87 shares

このブログではオリジナルのソーシャルボタンを設置して、サイト表示速度を高速化し、…

5. 軽量化(共通コード使い回し。サムネイル統一。WPプラグイン削減)

新テーマ作成にあたり、かなり軽量化しました。特に共通コードを関数化、パーツ化してなるべく重複コードのないようにしました。また無駄な条件分岐も削減しました。

前回テーマに比べて大きく高速化に貢献したのが「サムネイルの統一化」です。ホーム(トップページ)、記事内、サイドバー、フッターなどの記事一覧のサムネイル画像をなるべく統一しました。

ちなみに前回テーマでは、画像のフルサイズを含めないサムネイルを、4サイズも使っていました。それを今回は2サイズのみに削減しました。これにより単純計算で、画像読み込み数やキャッシュを半減できます。

WordPressの新テーマ PC版

WordPressプラグインも更に減らしました。上で書いたテーマ切替プラグインも減らしたプラグインの1つです。これまでに不要となったプラグインや、その代替方法については、下記事を参考にしてください。

WordPressで13プラグインを減らして高速化する方法まとめWordPressで13プラグインを減らして高速化する方法まとめ105 shares

WordPressプラグインは便利ですが、多用しすぎると高速化を阻害する要因にも…

6. メンテ性の大幅向上(テーマファイルはindex.phpだけ)

内部的に一番大きな改善はこれです。スマホ版とPC版のテーマを集約しただけではなく、テーマファイルも「index.php」の1つに集約しました。

「header.php」「footer.php」「sidebar.php」は従来どおり使ってますが、「single.php」「page.php」「category.php」などはありません。page.phpをなくす方法は下記事を参考にしてください。

【WordPress】固定ページでpage.phpでなく投稿記事のsingleを共通利用する方法【WordPress】固定ページでpage.phpでなく投稿記事のsingleを共通利用する方法18 shares

このブログはWordPressというブログシステムで運用しています。テーマ(デザ…

もともと「index.php」はループを回してるだけなので、コード量は少なかったです。だからここに記事部分の処理を書いても問題ないと思いました。ただし最初の条件分岐が1回だけ増えます。

「index.php」に集約するメリットは、デザインや機能の共通部分を修正・メンテナンスする時に忘れにくくなり、アップロードなども面倒でなくなります。たった1つのことですが、時間がたつにつれて効いてきます。

ただしこの方法は、個別記事とホームの構造が全く異なる場合には逆に非効率になります。個人ブログだから可能な技かもしれませんね。

7. SEO対策(内部リンク、重複しないスニペット、noindex付与)

もちろん、SEO対策も更に重視しています。といっても最近は、構造的なSEO対策よりも、記事内での仕組み(タイトル、h1〜h3、記事内リンク、キーワードなど)の方が重要なので、むしろそれらを邪魔しない基本的な構造に徹しました。

まず記事内以外の内部リンクは、多すぎず少なすぎずを考慮して、Googleなど検索エンジンにインデックスされたい記事は、頻繁に紹介するようにしています。逆にフッター、サイドバーにあった無駄リンクは排除しました。

Google検索結果に表示されるスニペットについては、重複しないように内部処理しています。例えばタイトル、meta descriptionはアーカイブファイルであっても、ユニークになるよう設定してます。

【WordPress】カテゴリ・タグページのタイトルと説明文をカスタマイズ【WordPress】カテゴリ・タグページのタイトルと説明文をカスタマイズ

ブログのカテゴリーやタグの一覧アーカイブページに、固有のタイトルや説明文(met…

パンくずリスト、Schema.orgによるMicrodataのリッチスニペット、公開日時の設定などについては、下記事を参考にしてください。Schemaについては新しい記事も書きたいと思っています。

【WordPress】パンくずリスト設置方法!プラグイン不要。複数カテゴリから選択可に【WordPress】パンくずリスト設置方法!プラグイン不要。複数カテゴリから選択可に18 shares

記事が複数カテゴリーに所属している場合に、好きなパンくずリストを1つだけ選びたい…

Google検索結果でも表示される!HTML構造化データschemaの記述方法Google検索結果でも表示される!HTML構造化データschemaの記述方法

HTML5が広まるにつれ構造化マークアップという言葉もよく聞くようになりました。…

【WordPress】公開日と最終更新日の表示方法!リッチスニペットでSEO対策も【WordPress】公開日と最終更新日の表示方法!リッチスニペットでSEO対策も

WordPressでブログ記事を書いた時に「公開日(または投稿日)」だけでなく「…

類似記事や文章量が少なかったり、もう読んでもためにならない記事は非公開にするか、noindexを付与して、Googleに低品質ページだと認識されないようにしています。

具体的には、カスタムフィールドに「noindex」のチェックボックスを追加するカスタマイズをしています。カスタムフィールドは他にもいろいろ応用しています。

【WordPress】カスタムフィールド設置でAll in One SEOも不要に!プラグインなしで【WordPress】カスタムフィールド設置でAll in One SEOも不要に!プラグインなしで66 shares

ブログのWordPressテーマを自作した時に、カスタムフィールドも自力で設置し…

まとめ:今日のゆめぴょんの知恵

今回は新テーマデザインの概要だけ紹介しました。次回からは、具体的な内部構造などについても書きたいと思っていますよ。

ちなみに今回もWordPressテーマは公開しないつもりです。前回テーマは何人かに配布したのですが、大衆向けに作ってないため、カスタマイズは私にしかわかりづらいです。その分、条件分岐もDBアクセスも圧倒的に少ないのですが(^^)

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめコピペでOK!WordPressのサイトマップを人気記事ランキングにする方法:次記事»
ページ
↑先頭
ホーム