【必見】STORK （ストーク）でのTOPページを変更する方法

今日はカメラ、写真の話ではなく、当ブログで使用しているWordPressテーマ「STORK（ストーク）」についての話になります。
デザインも格好よく、カスタマイズしやすいので、多くのブロガーに愛用されているテーマになります。

今回はトップページのカスタマイズのお問い合わせをいただいたので、簡単に解説していきたいと思います。
と、その前にSTORK（ストーク）知らないよ！って方に少しご紹介。

1 STORK（ストーク）って？
2 トップページを変更する
3 最後に

STORK（ストーク）って？

STORKはOPENCAGEが開発した“有料の”WordPressテーマになります。
OPENCAGEが提供しているWordPressテーマには他にも「ALBATROS（アルバトロス）」、「Hummingbird（ハミングバード）」、「SWALLOW（スワロー）」がありどれも人気ですが、多分利用されているテーマは「STORK（ストーク）」だと思います。

理由は、豊富なウィジェットに便利な専用ショートコード、サイトのカスタマイズのしやすさ、そのままで十分綺麗なデザイン性などから、すぐに書くことに専念出来る環境構築が出来るところだと思います。

例えば、

[html] [aside type="normal"]補足説明
ここには補足説明が入ります。簡単ですね！
[/aside] [/html]

上記のように“aside”というテーマ専用のショートコードを使うと、

補足説明
ここには補足説明が入ります。簡単ですね！

といった感じに表示がされます。cssを設定しなくても、あらかじめこういったショートコードが用意されているのはとても便利ですよね。htmlやcssが苦手でも簡単に扱えます！

有料で少し高いと思う方もいるかもしれませんが、書くことに専念できるので、長い目で見るととってもお得だと思います。

トップページを変更する

今回は当ブログ「フォトミルクる？」にて、TOPページの表示の仕方についてお問い合わせがあったので簡単に説明していきます。
勿論、テーマ開発元のOPENCAGEにも細かく記載がありますので、合わせて確認下さい！

スライダーの設定方法

記事をスライダー上に表示させる方法になります。

WordPress管理画面にて、【管理画面 > 投稿 > タグ】から「pickup」というスラッグの「タグ」を新規作成します。

上図のように、名前は好きな名前を、スラッグは「pickup」と入力、説明も任意に入れます。

これで投稿記事編集画面のタグの追加にて、「pickup」を追加すれば完了です！
とっても簡単ですね！

トップページを1カラム表示にする方法

これは色々とやることが多いのですが、工程をキチンと踏んでいけば難しくないので頑張っていきましょう。ちなみに子テーマが必須となります。

子テーマとは
WordPressのテーマは定期的にバージョンアップします。更新すると、そのテーマに入っている全てが更新されるので、もし、テーマの「style.css」や「function.php」をいじったりしていると、初期状態に戻されてしまい、再度設定しなければいけなくなります。この手間を省くために、元のテーマを親として、子テーマを設定し、そちらで「style.css」や「function.php」をいじることで、親テーマのバージョンアップをしても、子テーマは更新されずそのまま設定をし続けられるわけです。

参考記事

子テーマのダウンロード・導入 | OPENCAGE

home.phpを子テーマにコピー

まず、FTPソフトなどで、テーマが入ったフォルダ内の「home.php」をダウンロードして、子テーマ内にコピーします。
WordPress管理画面にて、【外観 > テーマの編集】を確認すると、子テーマに「home.php」が反映されているので、これを編集していきます。

home.phpを編集

[html] <div id="inner-content" class="wrap cf">
[/html]

home.phpの3行目付近にある上記コードを下記コードに変更します。

[html] <div id="inner-content" class="wrap page-full wide cf">
[/html]

これにより記事一覧が画面フルで表示されるように設定されました。
このままだと、サイドバーが記事一覧の下に表示されてしまうので、サイドバーを削除します。
home.phpの38行目付近にある下記コードを削除します。

[html] <?php get_sidebar(); ?>
[/html]

ここでいじっているのはトップページである「home.php」の編集なので、記事ページのサイドバーはキチンと表示されるのでご安心ください。

style.cssを編集する

このままですと2記事が横並びになっているので、3記事1列表示になるように「style.css」を編集します。

マガジン風レイアウトを選択している場合は、以下を「style.css」に加えて更新します。

[html] /* デバイス幅が768px以上の場合にマガジン風レイアウトを3カラムにする */
@media only screen and (min-width: 768px) {
.post-list-magazine .post-list{
width:33.333%;
}
}
[/html]

同様に、カード型レイアウトの場合を選択している場合は、以下を加えて更新します。

[html] /* デバイス幅が768px以上の場合にカード型レイアウトを3カラムにする */
@media only screen and (min-width: 768px) {
.post-list-card .post-list{
width:31.333%;
}
}
[/html]

これで完成です！

やる前に必ずバックアップをとりましょう。
WordPressではちょっとした設定エラーで表示が全部バグってしまうことが多々あります。（特に「function.php」を編集する際は要注意）なので、記事のバックアップや、FTPソフトなどでバックパップを必ず取り、編集作業をすることをお勧めします。