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

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

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

STORK（ストーク）って？

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

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

例えば、

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

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

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

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

トップページを変更する

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

スライダーの設定方法

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

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

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

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

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

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

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

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

home.phpを編集

<div id="inner-content" class="wrap cf">

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

<div id="inner-content" class="wrap page-full wide cf">

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

<?php get_sidebar(); ?>

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

style.cssを編集する

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

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

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

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

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

これで完成です！

ブログ内記事カードの表示方法

関連記事を簡易表示する“kanren”、2カラム表示が出来る“colwrap”というテーマ専用のショートコードを用いることで、簡単に表示できます。

[kanren2 postid="記事番号,記事番号,記事番号"]

この記事番号は、WordPress管理画面にて、【投稿 > 投稿一覧】にて記事タイトルにカーソルを当てると、下に番号が表示されるので、これを入れ込みます。

あとは、

[colwrap]
 [col2][kanren2 postid="記事番号"][/col2]
 [col2][kanren2 postid="記事番号"][/col2]
[/colwrap]

とすれば、2カラム表示されるので完成です。

トップページでは上図のように記事一覧は「home.php」にて編集、その上部と下部は、【外観 > ウィジェット】にある「PC:トップページ上部」、「PC:トップページ下部」に「カスタムHTML」を入れ書き込むことで反映されます。

最後に

ストークは利用されている方がたくさんおります。それだけ扱いやすいテーマなのだと思います。
ブログはデザインよりも中身が大事なので、そういった意味でもストークは何もしなくても綺麗なデザインというところも人気なのだと思います。

でも、色だけでなく少し違った見せ方をしたい！と思ったら、HTMLやCSSの知識があまりなくても、ショートコードを多用したりすることで十分カスタム可能なので、是非自分だけのブログをデザインしてみてください。

たまには写真のことだけでなく、こういったWordPressに関する記事も書いていこうと思います。

もしこのテーマが気になった際は公式ページも見てみて下さい！