こんにちは、アキです。
このブログで使用してるSTORK（ストーク）のPC表示を完全1カラム化したので僕なりの方法をまとめました。カスタムするのは大きく分けてトップページ、記事一覧ページ、キーワード検索の結果一覧ページ、投稿ページ、固定ページの5つです。
PHPやCSSをカスタムする際は必ずバックアップをとり、必ず子テーマで変更を加えることをおすすめします。作業は自己責任でお願いします。
もくじ
コンテンツ（投稿・固定）を1カラムにする方法
投稿ページの場合
デフォルトの2カラムの他に1カラムがフルサイズとバイラル風の2種類があります。
1カラムにする場合、フルサイズだとコンテンツ幅がフルサイズで広すぎます。バイラル風だとアイキャッチが特殊な表示になり気に入りませんでした。
なのでアイキャッチを含めたコンテンツ幅は変えずに1カラムにするカスタムをしました。方法は別の記事にまとめていますので、そちらへどうぞ。
カスタムにはsingle.phpに変更を加えていきます。
固定ページの場合
固定ページも同じでレイアウト機能で1カラムにすることが可能ですが、コンテンツ幅がフルサイズ表示になってしまいます。通常のコンテンツ幅のままで1カラムにする場合はPHPファイルをカスタムします。
固定ページの場合はpage.phpに変更を加えていきます。
44行目にある下記コードを削除します。
1 | <?php get_sidebar(); ?> |
これでサイドバーが消えます。
次に3行目にある下記コードを探します。
1 | <div id="inner-content" class="wrap cf"> |
このコードの中の「wrap」と「cf」の間に「page-full」を付け加えます。
これで2カラムの時のコンテンツ幅のまま中央に表示されて1カラムになります。
トップページを1カラムにする
このブログでは1カラムにした固定ページをトップページに設定していますので、その方法をまとめています。
トップページが記事一覧だという場合はhome.phpにカスタムを加える必要があります。archives.phpのカスタムと同じ要領です。
固定ページをトップページに設定する
記事一覧ではなく固定ページを使用したトップページに作り変えるカスタムです。このブログのトップページも固定ページを利用しています。カテゴリーごとにおすすめ記事をまとめたりできて便利です。
まずは固定ページを新規追加で作成します。レイアウトを「サイドバーなし（1カラム）」で作成することでトップページが1カラムになります。
作成した固定ページには分かりやすいタイトルを付けて保存します。僕は「固定フロントページ（1カラム）」と付けました。
保存した固定ページをトップページへと設定するには、「外観 > カスタマイズ > ホームページ設定」を開きます。
- ホームページの表示 > 固定ページ
- ホームページ > 作成した固定ページ
「投稿ページ」という項目はこの時点ではまだ設定しませんので気にしないでください。
トップページとは別に記事一覧ページを作る
トップページに固定ページを設定してしまうと、従来の記事一覧ページがなくなってしまいます。なのでトップページとは別に記事一覧ページを作成する必要があります。（必要な場合は）
このブログのトップページ
僕はトップページには固定ページを設定しましたが、その中に「すべての記事一覧」というリンクボタンを置いて記事一覧ページへの誘導をしています。トップページとは別に記事一覧だけのページも見られます。
記事一覧ページの作り方は、同様に固定ページを新規追加で作成します。
タイトルは「すべての記事」、パーマリンクは「archives」など好きなワードで設定してください。
本文は入力せずに公開保存します。作成したページを記事一覧ページへと設定するには、「外観 > カスタマイズ > ホームページ設定」を開きます。
- 投稿ページ > 作成した固定ページ
上記の設定をすれば、空白で作成した固定ページが記事一覧ページになります。
トップページと記事一覧ページが別々になりました。
ページ作成時に設定したパーマリンクが記事一覧ページのURLとなります。
- https://akistyle.jp → トップページ（固定ページ）
- https://akistyle.jp/archives → 記事一覧ページ
ということになります。従来のトップページであった記事一覧ページは「/archives」が付いたリンクになりました。
トップページ上に「すべての記事一覧」というリンクを置いておくと便利です。
記事一覧ページを1カラムにする
記事一覧ページの1カラムにする方法はOPEN CAGEさんの「WPストークのトップページをワンカラムにするカスタマイズ | OPENCAGE」を参考にさせて頂きました。詳しくはそちらへ。
僕は自分の使用するカード型レイアウトだけをカスタムしました。ほとんど参考記事の通りです。
参考記事ではhome.php（トップページ）をカスタムしていますが、このブログの場合トップページには固定ページを表示させているのでhome.phpをカスタムしても効果がありませんでした。
このブログでの記事一覧ページをカスタムするにはarchives.phpに変更を加えていきます。
まずは62行目にある下記コードを削除します。
1 | <?php get_sidebar(); ?> |
これでサイドバーが消えます。
次に3行目にある下記コードを探します。
1 | <div id="inner-content" class="wrap cf"> |
このコードの中の「wrap」と「cf」の間に「page-full wide」を付け加えます。
これでメインコンテンツが中央に表示されて記事一覧が1カラムになります。
カード型レイアウトを3カラムに調整
これも参考記事のままの作業でしたが軽くまとめておきます。
上記の方法で1カラムにした状態だとフルサイズ幅でカード型レイアウトが表示されています。
これだとリンクカードが2カラムのまま大きくなって表示されているので、リンクカードを3カラムにする調整をします。
下記コードをスタイルシートに追加します。子テーマのstyle.cssです。
1 2 3 4 5 6 | /* デバイス幅が768px以上の場合にカード型レイアウトを3カラムにする */ @media only screen and (min-width: 768px) { .post-list-card .post-list{ width:31.333%; } } |
これでフルサイズ幅の中にリンクカードが3カラムで表示されるようになります。（コンテンツ幅が768pxを下回ると2カラムに切り替わります。）
これでカード型レイアウトがバランスよく3カラムになりました。3カラムなので記事の表示数もバランスよく9個に変更。
他のレイアウトでの調整方法はOPEN CAGEさんの参考記事へどうぞ。
キーワード検索の結果一覧ページを1カラムにする
上記の4つまでをカスタムしたところで全てを1カラムにできたと思っていたけど、キーワード検索して表示される結果一覧ページが1カラム化できていませんでした。
カード型の3カラム化だけ適応されています。（サイドメニューが無いのはウィジェットを空にしたためです。）
自分でもよく気が付いたなと思います。キーワード検索はあんまり使う人いないんじゃないかな。
ということでキーワード検索の結果一覧ページはsearch.phpに変更を加えていきます。
まずは37行目にある下記コードを削除します。
1 | <?php get_sidebar(); ?> |
これでサイドバーが消えます。
次に3行目にある下記コードを探します。
1 | <div id="inner-content" class="wrap cf"> |
このコードの中の「wrap」と「cf」の間に「page-full wide」を付け加えます。
これでキーワード検索の結果一覧ページが中央に表示されて1カラムになります。
まとめ：まだまだストークでいける
OPEN CAGEからついにストークの後継テーマであるスワローが登場しました。ストークから無駄を省きシンプルになったイメージで少し魅力も感じます。
しかしそれほど大きな変更点がなかったので乗り換えるまでは至らないかなと。完全に1カラム化にしたので心機一転ストークで頑張っていこうと思います。
以上がストークをワンカラム化した方法でした。
