FirstUpに設定してあるカスタマイズ一覧

FirstUp(ver 1.01)にどのような機能があるのか分かりやすくするため、デフォルトで設定してあるカスタマイズを一覧にしてご紹介します。

ブログ全体

ブログのどのページでも表示されるものや、固定ページ、404ページ、検索結果ページなどで表示されるものについてご紹介します。

PC表示かモバイル表示かを判別する条件分岐

FirstUpでは、レスポンシブWebデザインを採用しておりますが、部分的にWordPressの条件分岐を使用し、表示内容を変更しております。

参考:PC表示かモバイル表示かを判別する条件分岐

グローバルナビゲーション(メニュー)の設定

ブローバルナビゲーションを、管理画面の『外観』→『メニュー』から設定できるようにしてあります。PCでの表示箇所は2カ所。ブログタイトルの右側(ブログ右上)とブログタイトルの下にあります。

パンくずナビをプラグインなしで表示。子カテゴリや構造化データも出力する

パンくずナビは、プラグインを利用することで簡単に設置できますが、FirstUpではプラグインを使用しなくても自動で表示させるようにしてあります。

参考:WordPressにパンくずナビをプラグインなしで。子カテゴリや構造化データも出力する

サイドバーにあるカテゴリ一覧に親カテゴリのみをリンク付きで記事数を表示させる

サイドバーにカテゴリ一覧をメニューのように表示してあります。ここには、『親カテゴリのみ』『リンク付き』『記事数を表示』『カテゴリスラッグをclassに出力』の設定がしてあります。

参考:サイドバーにあるカテゴリ一覧に親カテゴリのみをリンク付きで記事数を表示させる

WP-postviewsを利用した人気記事ランキングをカスタマイズ

WordPressプラグイン『WP-postviews』を利用して人気記事ランキングを表示させ、デザインをカスタマイズしております。

Googleアドセンスをウィジェットで管理。PCかモバイルかの条件分岐も

Googleアドセンスなどのバナーリンクをウィジェットで管理できるようにしてあります。トップページの一覧下やカテゴリアーカイブの記事一覧下、サイドバー上部などを分けて設置できるので、どこの広告をクリックしたのかなどを判別することができます。ここにもPCかモバイルかの条件分岐もしてあります。

ページトップに戻るリンクをjQueryで設定

そのページのトップ部分に戻るためのリンクをjQueryで設置してあります。

固定ページで専用のテンプレートを複数用意

固定ページ用に、ブログと同じレイアウトのテンプレート、1カラムレイアウトのテンプレート、ランディングページで使いやすいデザインのテンプレートをご用意しました。

404ページをオリジナルデザインで表示させる

記事を削除した後にその記事URLで表示させようとするとエラーページ(404ページ)が表示されます。あまり表示される機会はないかと思いますが、ここにもデザインに合わせたテンプレートをご用意しました。

そのページには、検索フォームやカテゴリのリンク、最新記事や人気記事の一覧を表示させ、離脱率を軽減させる施策をほどこしてあります。

検索結果エラーページをオリジナルデザインで表示させる

検索フォームで検索したワードがなかった際に表示されるページを、オリジナルデザインにしてあります。ほぼ404ページと同じで、検索フォームやカテゴリのリンク、最新記事や人気記事の一覧を表示させ、離脱率を軽減させる施策をしてあります。

ちなみに、検索した結果が表示された場合には、アーカイブページなどと同じように検索したワードがページタイトルとなり、記事一覧を表示させます。

トップページ

サムネイル画像を設定しているかどうかを判別する条件分岐

サムネイル画像がある場合と、ない場合の条件分岐をおこない、表示スタイルを変更しております。

サムネイルがない場合は代替画像を表示させる、という方法もありますが、毎回画像がない記事を更新している場合、代替画像ばかり表示されてしまいます。なくてもきれいに表示させるための方法です。

記事が所属しているカテゴリのスラッグを取得し、classに出力する

一覧として並んでいる記事ごとに、所属するカテゴリのスラッグを取得し、classに出力させております。これがあると、カテゴリ毎に背景色を変更させたり、フォントカラーを変更したりなど、カスタマイズしやすい環境を作ることができます。

例として、カテゴリスラッグを『wordpress』にした場合、『<div class=”wordpress“></div>』と出力されます。

カテゴリやタグアーカイブページ

色々なところにカテゴリ名やタグ名を表示させる

カテゴリ名やタグ名をアーカイブページのタイトルにしたり、見出し内に表示させたりしております。SEO対策。

カテゴリやタグに設定した説明文をアーカイブページに表示させる

該当のカテゴリやタグについての説明文をアーカイブページのタイトル下に表示させることができます。

カテゴリやタグに所属する記事数を取得する

アーカイブページの最新記事一覧の見出し部分に記事数を表示させております。

スマートフォン

横から出てくるナビゲーションメニューの設置

スマートフォンでもブログ回遊率をアップさせるために、画面横から出てくるナビゲーションを設置してあります。

ここには、トップページやカテゴリ一覧、グローバルナビゲーションで設定したリンクを一覧で表示。

また、記事ページにのみ、『ツイートボタン』『facebookシェアボタン』『はてブボタン』の3つをオリジナルデザインのボタンで設置しております。

PCかモバイルかの条件分岐を、タブレットは除外し、スマートフォンのみに指定する

WordPressのモバイル条件分岐は、標準ではタブレット(ipadなど)も含まれております。しかしFirstUpでは「タブレットはPCとほぼ同じ表示に」という基準を設けているため、条件分岐にはタブレットを除外してあります。

※レスポンシブで対応している箇所もあります。

FirstUpに設定してあるカスタマイズ一覧 by

コメントを残す