ワードプレステーマSTORKのトップページを固定ページにするカスタマイズ方法(動画と画像解説あり)

ブログで食ってるプロ引きこもりのヒキコモリズム井上(@luckyman0302)だ。

ワードプレスのテーマ「STORK」は機能性が抜群で、トップページの表示もCSSなどをいじらずとも変えることができる。固定ページを使えば簡単に。PHPなどをいじる必要もない。とてもステキなワードプレスのテーマだ。

この固定ページのトップページ化はあまり検索しても出てこないので、僕がまとめておこうと思う。

このカスタマイズをすればこんな感じにできるよ。トップページ見てみてね。

• ヒキコモリズム.COM
• ブログマーケッターJUNICHI

ワードプレステーマ「STORK」の固定ページのトップページ化のカスタマイズ方法を動画解説したよ

まずは動画を見てみてね。

STORKの固定ページのトップページ化で使うショートコード

以下のコードしか使いません。ここに入れるとコードそのものが表示されないので外部へ飛ばすのでご確認を。使うものだけピックアップして記載したのでショートカットしたい方はどうぞ。

参照：https://open-cage.com/stork/document/shortcode/

STORKの固定ページのトップページ化の実際の手順(画像解説)

以下、画像解説。簡単にまとめると以下の手順になるよ。

1. 固定ページを作成：フロントページ用＆投稿一覧用
2. カスタマイズ画面で設定
3. 最新記事を上部に表示

１、フロント用固定ページを作成する。

• ダッシュボード➡️フロントページ用固定ページ作成へ。
• 先に紹介してるショートコードを使って最新記事一覧のボタン➡️カテゴリー➡️おすすめ記事と構築していく

3カラムか2カラムかは好み。個人的にはごちゃごちゃしにくい2カラムがいいのでは？と思ってる。また、あまり商業的なバナーは載せない方が吉。特にスマホでは。詳しくは動画をご覧あれ。めっちゃ簡単！

タイトルは不要

アイキャッチもサイドバーも不要

一応は記事なので、SEO項目はいれましょ。

２、記事一覧用固定ページを作成

これは記事一覧用のページ。

このボタンから飛ぶ先

固定ページ作成から

• タイトル
• パーマリンク
• SEO項目

をいれたら更新。

本文不要

３、「カスタマイズ」で固定ページをトップページに

ダッシュボード➡️外観➡️カスタマイズから編集できる。この設定が終われば、トップページのデザインが変わってるはず。ここも簡単！

ここから…

ここをクリックして…

このように設定します。

４、ウィジェット編集画面で最新記事をトップページに表示

これです

外観➡️ウィジェットから設定。

この2つに設定する。

以上。これで設定が完了。簡単でしょ？動画みながらやれば普通にできるはず。どうぞお試しを。

おまけ：STORKのトップページのメニュー下の帯の色を変える方法

写真囲ってる部分の色の変更。これまたググっても出てこなかったので、紹介しておく。デフォルトだとオレンジのようなピンクなんだけどこれ、好みとかサイトのテーマカラーで変えたいよね。僕はモノトーンが好きなので、黒っぽいグレーにしてる。

ここです

まず、該当するCSSを探す

めんどくさい人は画像の下にCSS書いとくのでそれみてね。

ここでは右クリック→検証を使う。該当する場所＝メニュー下の帯をドラッグしてる状態で右クリックをして画像の検証というものを探してみて。

Macの場合二本指で右クリックできるよ→詳しくはこちら

そうすると画像のような画面が出てくるので、ピンクで囲ったCSSをみてみてほしい。

このCSSを探してみてね。

こんな感じでコードがずらり。上記画像のピンク枠のコード見つけたらOK。この画面上で色のテストができるよ。以下のCSSをコピペ下から赤字の部分を検証画面上で変えるとどの色が合うかわかる。ここが背景色に対応してる。ところ。色コードはこのページで取得してね。

気に入った色があったらSTORKテーマそのものを編集する

ここからテーマそのもののCSSを変えるよ。ちゃんと本来のCSSはどこかにバックアップ取っておいてね。白くなった！とか消えた！とか言われても対応なので自己責任で。

ダッシュボードの外観→テーマの編集→親テーマの編集に移動。

親テーマを編集します

本当は子テーマでやりたいところだけど、なぜか反映されなかったので親テーマそのものをいじくる。

親テーマの編集画面に行ったら「スタイルシート」へ。画面右下の方にある。飛んだら編集画面上で「commandとFを同時押し」してページ内検索をかける。右上に検索窓出るので、そこにさっき紹介したCSSを貼ってエンター。

そうすると以下の画像のようにオレンジでみやすくなるのですぐ見つかる。

画像の矢印のとこをに気に入った色のコードを。

で、#333の部分の#~で表示されてるところを自分の変えたい色にすれば完了。簡単でしょ？

ただ、キャッシュの影響ですぐにはSNSなどで反映されないことがあるので、可能であれば普段使ってないブラウザなどで自分のブログを確認してみてね。反映されてるはず！

ワードプレステーマのSTORKは本当におすすめ！

こんな感じで使える小技がたくさんあるので、僕は今のところSTORKを強くおすすめする。しばらく乗り換える気もなし。かぶるけど、自作でもせんかぎりテーマなんてどうせかぶるから気にしない！

本当に操作性に優れてるので、気になる方はSTORKをどうぞ！

STORK公式サイトを見てみる