JIN

JIN のカテゴリページを1カラムにする方法

JIN カテゴリページを1カラムにする
相談者

スマフォもシングルカラムだし、PCもいっそのことシングルカラムにしたいなあ

JIN のカテゴリページは、デフォルトで2カラム。これを設定で変更することはできません。テンプレートファイルを編集して実現する方法をご説明します。

本記事の内容
  • JIN のカテゴリページを1カラムにする前準備
  • JIN のカテゴリーページを1カラムにする方法

あと、1カラムにする利点について気がついたことがあるので合わせてご紹介します。

この記事を書いた人

WordPress のプラグインとテーマ、ブログ記事作りに役立つ記事を書いてます。
テーマは、Cocoon、JIN、Lightning、SWELL を主に使ってます。

WP愛だけじゃ生きていけない😂

そよ
そよ
Vektor Passport(ライセンス期間1年)

JIN のカテゴリページは2カラムのみ

JIN は、この設定を変更することはできません。

過去、同じことを検索していた人もいましたが、サポート側からの回答は自分で解決してください、とのことでした。

ちょうど私もカテゴリページを1カラムにしたかったので、テーマファイルを触ってみたらうまくいったのでシェアします。

JIN のカテゴリページを1カラムにする前の準備

少しだけ準備が必要です

  1. FTPでサーバーへ接続することができること
  2. テーマファイルは JIN の子テーマを使っていること

FTP でサーバーへ接続する

FTP は、コンピュータとサーバーを接続するためのアプリケーション。テーマファイルを編集する時は必須のアプリです。

サーバーで用意してある FTP 画面でも同じことができます。しかし、操作はアプリの方が楽ので、できればアプリを用意しましょう。

FTPの接続方法、設定方法などについては、契約しているサーバー会社のマニュアルなどを参考にしてください。

FTP アプリは、Windows なら FFFTP、Mac ですと、Filezilla がそれぞれ無料で使えるのでおすすめです。

テーマファイルは JIN の子テーマを使っていること

WordPress のテーマは、親テーマと子テーマがあります。

まず、WordPress のテーマ設定で、JIN の子テーマであることを確認してください。

子テーマは、親テーマのファイルに渡したい命令などを書くと、親テーマよりも優先して実行してくれます。

今回、親テーマにあるファイルを子テーマにコピーし、それを加工して読み込ませることで、カテゴリページの1カラム化を実現しています。

JIN の子テーマはこちらからダウンロードできます

WordPress へアップロードして有効化するだけですぐに利用できるようになります。

JIN のカテゴリページを1カラムにする方法

次のような流れになります。

FTP で WordPress サイトへ接続する

STEP
1

wp-content → themes → jin へ移動する

STEP
2

jin フォルダ内の、category.php をダウンロードする

※このファイルはバックアップファイルにもなります。

STEP
3

ファイルを jin-child フォルダへアップロードする

STEP
4

WordPress の管理画面へ移動

外観→テーマファイルエディタを選択して編集画面へ移動する。

右上のテーマ選択が、Child になっていることを確認する

STEP
5

category.php を開いて書き換える

書き換える場所は次のとおりです。

1.idの中身を書き換える

21行目と、56行目の二ヶ所ありますので注意してください。

<main id="contents" class="main-contents <?php echo is_article_design(); ?> <?php is_animation_style(); ?>" itemscope itemtype="https://schema.org/Blog">

<main id="onecolumn960" class="main-contents <?php echo is_article_design(); ?> <?php is_animation_style(); ?>" itemscope itemtype="https://schema.org/Blog">

2.サイドバーをコメントアウトする128行目

	<?php get_sidebar(); ?>

	<!-- ?php get_sidebar(); ? -->
STEP
6

保存して表示を確認する

「キャッシュクリア」してブラウザで表示確認をしましょう。

▽ショートカットキー
  • Mac:Command + Shift + R
  • Windows:Ctrl + Shift + R or Ctrl + F5
STEP
7

・テーマファイルを触るときは、慎重におこなってください。
・必ず元のファイルを残してから作業してください。
・WordPress で編集した方が間違いないので、そちらで行ってください。
(ダウンロードしたファイルは、オリジナルのバックアップ代わりです)

見た目の微調整をする

少しだけ見た目調整をしてみました。

JINの調整設定

本文の外枠を消す

せっかく広々となったのでコンテンツの外枠を外して広々と見えるようにしました。

フッターの幅を全幅にする

フッターの幅がコンテンツ幅だとバランスが悪く見えるので、全幅にしました。

JIN を1カラムにして出来なくなること

1カラムにすると、ウィジェトが表示されなくなります。

表示されなくなるウィジェトの場所は次のとおりです。

  • サイドバー
  • サイドバー追尾【PC】
  • トップページ上部
  • トップページ下部
  • 記事上部
  • 記事下部

どうしてJIN のカテゴリページを1カラムに?

1カラムにしたかった理由は次の通り。

  • トップページや投稿ページを1カラムにしたのに、カテゴリだけならなかった
  • ページ表示スピードが上がる

いままではサイト回遊率とか広告を配置のためという理由で2カラムにしていました。

ですが、実際にその部分をみるのって、よほどブログ記事がよかった、もっと読みたいと思った時くらいではないでしょうか。

普通に読んでいると逆に邪魔に感じることが多くないですか?

1カラムの内容に集中して欲しい、読み手も記事に集中できる、というメリットがあるのではないかと。

ページスピードは、実際にご自分のサイトで試してみてほしいのですけど、投稿ページを1カラムにするだけで表示スピードが上がります。

決して難しくはないので、もし1カラムにしたいなあというときは試してみてください。

最後まで読んでくださりありがとうございました。

おまけ:JIN 以外のテーマでカテゴリーページを1カラムにできる?

少し気になったので他のテーマはどんな感じなのか調べてみました。

SWELL のカテゴリーページ

SWELL のカテゴリーページ設定は、カテゴリーページで編集することができます。

  1. 投稿 → カテゴリー へ進む
  2. カテゴリーを一つ選んで編集画面へ移動する
  3. 編集画面でサイドバーの部分を非表示にする

SWELL のカテゴリーページは、ブログパーツを呼び出すことで、追加情報を表示させることができます。

Lightning G3 のカテゴリーページ

Lightning G3 のカテゴリーページは、カスタマイズページで編集できます。

  1. 外観 → カスタマイズ → Lightning レイアウト設定 → カラム設定
  2. アーカイブページ [投稿] の設定を1カラムにする

Lightning のカテゴリーページは、カテゴリーリスト一覧を表示できますが、JIN や Lightning のように追加情報を表示させることができません。

追加情報を表示させるには、別のカスタマイズが必要なようです。

そよ

ウィジェットを挿入できたりするかと思ったけれど、それも無さそうなので、phpファイルを弄るほうが早いかも。

Cocoon のカテゴリーページ

Cocoon は、カテゴリーページに設定があります。また、追加情報を加える場所があるので、カテゴリーリスト以外に情報を追加することができます。

Cocoon が一番シンプルにカテゴリーページを作れる。

Cocoon|個別の詳細なカテゴリページを作る方法(カテゴリページのコンテンツ化)

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間1年)