WPストークのトップページを固定ページにしてカスタマイズしてみた

スポンサーリンク



2017年1月にはてなブログからWordPressへと移行しました。現在このブログではWordPressテーマ「ストーク」を使ってます。

ストークは使いやすいっちゃあ使いやすいテーマなんですけど、一発で『あ、ストーク使ってるな」ってわかっちゃうんですよね。決してそれがダメなわけではないですが、他のブログとの差別化はしていきたいところ。

ということで固定ページをブログのトップページにカスタマイズしてちょっと個性を出してみました。

今回は「WPストークのトップページを固定ページにしてカスタマイズしてみた全手法」をまとめていきます。

最新記事の挿入方法を知りたい方はトップページに最新記事を挿入したい場合は?からどうぞ。

本日の課題
一般的なブログの記事一覧トップページ→ワンカラムのオリジナルトップページ


トップページを固定ページにしようと思った経緯

ブログの案内マップを作りたかった

トップページを固定ページにしようと思った理由はズバリ「ブログの案内マップを作りたかった」からです。

ブログのトップページといえば、最新記事がずらっと並んでいるのが一般的ですよね。

もちろんユーザーは情報を求めてきているので記事を読みます。記事を書いているブログ運営者まで興味を持つ人はごく稀でしょう。

『略してとりてみ』のような「書いてる記事のジャンルが散らかってる雑記ブログ」は、特に案内マップが必要だと感じたわけです。

テーマパークのパンフレットにマップがなかったら遊びづらいし、渋谷の駅構内にマップがなければ目的地まで相当の時間を要しちゃうし。

使いやすい、周りやすいブログが一番いいです。

「マップがなかったせいで……」はもったいない

もし、とあるキーワードでブログに遊びに来てくれた人が『あ、このブログ面白そうだな(トップページポチ』とトップページに訪れたとしましょう。

そのあとに予想される主な行動は以下の通りです。

  1. 同じジャンルの記事をカテゴリーから探す
  2. タイトルとアイキャッチを選びながら面白そうな記事を探す
  3. 他にどんなジャンルを扱っているのかをカテゴリーから調べる
  4. ブログ運営者のプロフィールを探す
  5. よく読まれている記事ランキングを探す
  6. 特に有益そうな情報がなかったのでブラウザバック

せっかくブログに興味を持ってくれた人がブログの案内マップがなかったせいで帰っちゃったらもったいないです。

『もっと他にも面白い記事があるのに。もっと他にも知ってもらいたいことがあるのに。もっと、もっと……』

こんな思いをしないためにも、トップページをブログの案内マップに仕上げていきましょう。

トップページに入れたい5つの要素

トップページに入れたい要素は以下の通りです。

【案内マップ一覧表】

  1. 最新記事
  2. メインカテゴリー
  3. 人気記事
  4. カテゴリーの一覧
  5. プロフィール

要素の選定や配置は同じくストークを使っている「やぎろぐ」や「ブログマーケッターJUNICHI」を参考にさせていただきました。


WPストークのトップページを固定ページにする方法

まずは固定ページを作ろう

まずはトップページの基盤となる固定ページを作りましょう。

▼WP管理画面上部メニュー>>+新規>>固定ページ [or] WP管理画面>>固定ページ>>新規作成


僕の場合は作成した固定ページのタイトルを「固定フロントページ」にして、パーマリンクスラッグは「空欄」にしました。

作成した固定ページをトップページに切り替えよう

作成した固定ページをトップページとして表示されるように設定をしていきます。

▼WP管理画面>>外観>>カスタマイズ
▼固定フロントページ>>フロントページの表示>>[最新の投稿→固定ページ]

▼固定フロントページ>>フロントページ>>[先ほど作成した固定ページを選択]

あとは固定ページの作り込みをしていくだけです。

うまく表示されないときは固定ページのパーマリンクスラッグを見直してみる

きちんと設定をしてみたもののリダイレクトループが発生してしまい、固定ページがうまく表示されなくなってしまいました。

WPプラグインを片っ端から一つずつ検証していった結果、Enhanced Custom Permalinksが原因だったことが判明。

プラグインページからEnhanced Custom Permalinksを停止したところ、ちゃんと固定ページがトップページに切り替わっていました。

ここで新たな問題が発生。

Enhanced Custom Permalinksを停止したことによって記事のパーマリンクがごちゃごちゃになってました。

『どうにかパーマリンク系プラグインを有効にした状態で固定ページをトップページにできないものかな……』

途方に暮れる僕を不憫に思ったのか、僕の脳内に住み着く神様が”お告げ”をくださりました。

『パーマリンクスラッグじゃよ、フォッフォッフォ』

そう、原因は固定ページのパーマリンクスラッグだったのです。

僕はトップページ用の固定ページのパーマリンクスラッグを「front-page」としていました。これがダメだった。

パーマリンクスラッグを設定してしまうと、パーマリンク系プラグインと干渉しあってダイレクトループに陥ってしまうようです。

トップページ用の固定ページのパーマリンクスラッグを「空欄」にしてみたところ、きちんとトップページとして表示されるようになりました。

記事一覧ページも欲しい場合は?

固定ページをトップページに設定すると、今まで表示されていた記事一覧ページが見られなくなってしまいます。

従来通りの最新記事が並んでいるページは欲しいですよね。これも固定ページで作っちゃいましょう。

さらに固定ページを作ります。

先ほどと同様に固定ページを作成します。記事タイトルは「記事一覧」にして、パーマリンクスラッグは「article-list」にしました。

本文には何も記入せずそのまま公開ボタンを押せば準備完了です。

あとは作成した固定ページを「固定フロントページ」の「投稿ページ」から設定してあげればOK。

▼固定フロントページ>>投稿ページ>>[先ほど作成した固定ページを選択]

パーマリンクスラッグを「article-list」にしたので、このブログの記事一覧のURLは http://www.toritemi.com/article-list になります。

URLをトップページに設定した固定ページの任意の場所にリンクしておけば、いつでも記事一覧ページを見ることができますよ。

僕はストークのショートコードを使って、記事一覧のボタンリンクをトップページに配置してます。こんな感じ。

参考:ショートコードの使い方

トップページ用の固定ページとヘッダー画像を作りこんでいく

ではトップページに表示させる固定ページとヘッダー画像を作りこんでいきましょう。

ヘッダー画像の設定

完成系はこのような感じです。

まずはブログのキャッチコピーを作っていきます。

▼WP管理画面>>外観>>カスタマイズ>>トップページ設定

キャッチコピーの英語表示テキストと日本語表示テキストを挿入します。

次にPC用とSP用のヘッダー背景画像を設定します。

ヘッダー背景のサイズ、繰り返し、ヘッダーボタンのURL、ヘッダーボタンテキストを設定しておきましょう。僕の場合はこんな感じです。

参考:トップページレイアウトの設定


固定ページをワンカラムにしたいときは?

固定ページの設定からワンカラムに変更が可能です。

▼固定ページ編集画面>>固定ページの属性>>テンプレート>>サイドバーなし(1カラム)

参考:WordPressテーマ「ストーク」で、固定ページをトップページにする方法と画像付きの最新記事を簡単に表示させる方法

固定ページをフロントページにする場合はオープンケージのサイトにある「ワンカラムにする方法」は必要ありません。

参考:WPストークのトップページをワンカラムにするカスタマイズ

固定ページのアイキャッチ画像を削除したい場合は?

Auto Post Thumbnail等でサムネを自動設定している場合は、これを非表示にしておきましょう。

▼WP管理画面>>カスタマイズ>>投稿・固定ページ設定>>[記事・固定ページでアイキャッチ画像を非表示]にチェック
[記事・固定ページでアイキャッチ画像を非表示]にチェックを入れるとすべての記事・固定ページのアイキャッチ画像が非表示になります。

トップページに最新記事を挿入したい場合は?

固定ページをトップページに設定すると、最新記事の投稿が表示されなくなってしまいます。

ウィジェットを使って最新記事を表示させておきましょう。完成イメージはこんな感じです。

設定の方法は簡単です。ウィジェットからPC&SPのトップページ上部に[最新の投稿]を挿入するだけです。

アイキャッチ画像の有無はお好きなスタイルでどうぞ。

▼WP管理画面>>外観>>ウィジェット>>PC:トップページ上部(SP:トップページ上部)に[最新の投稿]を挿入

固定ページのタイトルを非表示にするには?

固定ページのタイトルを非表示にするには、以下のコードをCSSに追加する必要があります。

▼WP管理画面>>外観>>カスタマイズ>>追加CSSにコードを挿入


これで固定ページのタイトルが表示されなくなります。

固定ページの目次を非表示にするには?

Table of Contents Plusで目次を自動表示している場合は、固定ページに以下のショートコードを書いておきましょう。目次が表示されなくなります。

ついでにページのスピードテストもしてみた

無事に固定ページをトップページに設定することができたので、ついでにGTmetrixを使ってページのスピードテストも行いました。

ちょっとマニアックな内容なので「どうでもいいや」って人はまとめへとお進みください。

固定ページを設定する前の従来通りのトップページ

PageSpeed Score:D(63%)、YSlow Score:E(57%)

固定ページをトップページに設定。

PageSpeed Score:F(45%)、YSlow Score:E(57%)

PageSpeed Scoreがガクッと下がってますね。改善していきます。

修正や設定の変更を行い、トップページの表示スピードを改善

細かい修正や設定の変更などを施し、トップページの表示スピードの改善を図ってみます。

アニメーションのオフ

PageSpeed Score:F(45%)、YSlow Score:E(57%)

1%も改善されてない……。

ウィジェットの削除

PageSpeed Score:F(46%)、YSlow Score:E(57%)

PageSpeed Scoreが1%改善されました。

ヘッダー画像の再編集

PageSpeed Score:F(46%)、YSlow Score:E(57%)

PageSpeed Scoreがさらに1%改善。

ヘッダー画像の削除

PageSpeed Score:F(48%)、YSlow Score:E(57%)

PageSpeed Scoreが2%改善。これぐらいならヘッダー画像は設定しておいていいかもしれませんね。

画像サイズの適正化

トップページに掲載してある画像のリサイズを行いました。

PageSpeed Score:E(55%)、YSlow Score:E(57%)

一気に7%も改善されましたね。やっぱり画像は表示が遅いのね。

最新記事のサムネイル画像削除

最新記事のサムネイル画像を削除してみました。

PageSpeed Score:D(61%)、YSlow Score:E(57%)

PageSpeed Scoreがさらに6%改善されましたね。

某ストーク使用ブロガーとのスピードテスト比較

「テーマがストークかつトップページが1カラム」と、共通点のあるブログのページ表示速度の比較のために行ってます。

問題があれば即刻削除いたします。コンテンツ量にも変わってくるので、あくまで参考程度に。

PageSpeed Score:E(57%)、YSlow Score:E(54%)
PageSpeed Score:F(35%)、YSlow Score:E(53%)

まとめ

以上「WordPressテーマ「ストーク」のトップページを固定ページにしてカスタマイズしてみた」でした。

ストークには便利なウィジェットやショートコードがたくさんあります。

デザインカスタマイズが苦手なブログ初心者でも、綺麗で使いやすいブログ作りが可能になってます。

ストークの詳しい機能については『初心者にもおすすめ!WordPressテーマ「ストーク」が熱い』でも解説してますので、もし興味がありましたらそちらもご覧ください。


関連記事

スポンサーリンク





この記事を書いた人

あめよふれ

あめのはっていいます。どうぞよろしく。

「”とり”あえずやっ”てみ”る。略して、とりてみ」がモットーの24歳。ノマドチャリダー。自転車で日本一周してます。アニメ聖地・心霊スポット・世界遺産巡り。趣味はアニメ鑑賞・ベース演奏・旅行・カメラなど。