ワードプレステーマ「ストーク」のトップページを1カラムにする方法!

ワードプレステーマ「ストーク」のトップページを1カラムにする方法!

WordPressの有料テーマ ストーク(STORK)のトップページを1カラムにするカスタマイズ方法を紹介します。

1カラムって事は、サイドバーがなくなるという意味ですね。

トップページはスッキリとシンプルに表示させたいものです。そういう意味では1カラムで表示させても面白いですね。

サイドバーがあれば記事のサムネイルは1列または2列でしか表示させられませんが、1カラムなら3列表示が可能になり見栄え的にも綺麗に表示することが可能になります。

手順は以下の通りになります。※万が一の場合のためにファイルのバックアップを取ることをお勧めします。カスタマイズは自己責任でお願いします。

STEP.1
home.phpの編集
ストークの親テーマから「home.php」をダウンロードして、コードを編集します。
STEP.2
サイドバーの削除
サイドバーがカラム落ちするので、「home.php」の38行目付近にあるコードを削除します。
STEP.3
CSSの調整
記事タイプ別にCSSを調整していきましょう。

なお、テーマファイルをカスタマイズする場合は、子テーマを利用することをお勧めします。

親テーマをカスタマイズした場合は、テーマのアップデート時にカスタマイズを行った箇所が上書きされてしまいます。

追記

2019年11月にSTORKの新バージョンとなる、STORK19が公開されました。

これによると、機能面でのパワーアップと表示スピードの改善を中心にアップデートが行われたという事です。

公式STORK19の特徴や変更点など

home.phpの編集

まず最初に、ストーク(STORK)の親テーマから「home.php」をダウンロードします。この時、FTPソフトを使うと良いですね。

ワタシは FileZilla(ファイルジラ)を使っています。導入方法は過去記事を参考願います。

FileZillaの使い方を初心者向けに分かりやすく解説【FTPソフト】

場所はブログのドメインから「public_html」➝「wp-content」➝「themes」➝「jstork」です。

WordPressテーマ「ストーク」のトップページを1カラムにする方法 home.phpの編集

テキストエディターに「home.php」を放り込みます。ここでは、TeraPad を使いました。

WordPressテーマ「ストーク」のトップページを1カラムにする方法 home.phpの編集

「home.php」の3行目のコードを下記のように編集します。

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

WordPressテーマ「ストーク」のトップページを1カラムにする方法 home.phpの編集

上書き保存をして子テーマ(jstork_custom)にアップロードします。

WordPressテーマ「ストーク」のトップページを1カラムにする方法 home.phpの編集

すると、トップページのサムネイル画像が大きくなり、サイドバーがカラム落ちしてしまいました。

WordPressテーマ「ストーク」のトップページを1カラムにする方法 home.phpの編集

スポンサーリンク

サイドバーの削除

そこで、サイドバーを削除してやります。方法は、「home.php」の38行目あたりにある下記コードを削除します。

HTML
<?php get_sidebar(); ?>

以上でサイドバーの削除完了です。

WordPressテーマ「ストーク」のトップページを1カラムにする方法 サイドバーの削除

記事タイプ別にCSSを調整する方法

これで1カラム化は成功しましたが、記事のサムネイル画像が大きくなりすぎて、バランス的にイマイチの感じになっているので、CSSを調整していきます。

ストークでは4通りのトップページ記事レイアウトがあるので、1つ1つ紹介していきます。

シンプル

下記のコードを子テーマのstyle.cssに追記すればOKです。

HTML

/* デバイス幅が768px以上の場合にシンプルレイアウトを中央寄せにする */
@media only screen and (min-width: 768px) {
 .top-post-list{
 max-width:728px;
 margin:auto;
 }
}

WordPressテーマ「ストーク」のトップページを1カラムにする方法 記事タイプ別にCSSを調整する方法

カード型

HTML

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

WordPressテーマ「ストーク」のトップページを1カラムにする方法 記事タイプ別にCSSを調整する方法

マガジン型

HTML

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

WordPressテーマ「ストーク」のトップページを1カラムにする方法 記事タイプ別にCSSを調整する方法

ビッグ

HTML

/* デバイス幅が768px以上の場合にビッグレイアウトを中央寄せにする */
@media only screen and (min-width: 768px) {
 .post-list-big{
 max-width:728px;
 margin:auto;
 }
}

WordPressテーマ「ストーク」のトップページを1カラムにする方法 記事タイプ別にCSSを調整する方法

やはりカード型がしっくりきますね。

まとめ

ここでは、WordPressの有料テーマ ストーク(STORK)のトップページを1カラムにするカスタマイズ方法 を紹介しました。

3つの手順で簡単に設定できると思います。

STEP.1
home.phpの編集
ストークの親テーマから「home.php」をダウンロードして、コードを編集します。
STEP.2
サイドバーの削除
サイドバーがカラム落ちするので、「home.php」の38行目付近にあるコードを削除します。
STEP.3
CSSの調整
記事タイプ別にCSSを調整していきましょう。
簡単でしたね。しかし万が一に備えて、バックアップは行っておいた方が良いですね。

ちなみに、固定フロントページを使用してトップページを作成している場合は、固定ページのテンプレートを「サイドバーなし(1カラム)」を選択すれば良いです。

追記:今後はストークの最新バージョンのSTORK19が購入可能です。

STORK最新バージョン【STORK19】

WordPress有料テーマSTORK(ストーク)関連記事一覧はコチラ

3 COMMENTS

Madda

初めまして。
質問がありコメントさせていただいております。
先日ストーク19をインストして、1カラム化及びサイドバーの削除まではうまくいったのですが、カード型(3列表示)がうまくいかないのですが、何が原因でしょうか?
ご教示いただければ幸いでございます。

返信する
ごりょんさん

Maddaさんコメントありがとうございます。ストークのトップページのワンカラムかですが、旧ストークならcssにコードを追加すれば良いです。

ワタシはストーク19を導入していないので旧ストークのワンカラム化しか分かりません、申し訳ありませんがストーク19のサポートに問い合わせてみてはどうでしょうか?

よろしくお願いします。

返信する
Madda

ごりょんさん

お忙しい中ご返信ありがとうございます。
ちょっとサポートに問い合わせてみます、

ありがとうございます!

返信する

ごりょんさん へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)