【メモ】カテゴリーごとにデザインを分岐する方法

このページでは、カテゴリー別にデザインを変更する方法を解説します。

カテゴリーごとに、デザインが変わったらオシャレですよね。例えば、映画のレビューブログで、コメディとホラーではデザインを全く別のものにしたりとか。

今回はそのような、カテゴリー別、または記事別にデザインを変える方法をメモ程度に解説します。

この解説での実行環境

パソコンはMacを使用しています。サーバーはXServer、テーマは、SANGOを使用しています。

上記の環境でない場合は多少手順が変わるかもしれませんので注意してください。

サトリク

ブログのカスタマイズは自己責任で行ってください!

カテゴリーページを変える手順

STEP.1
Xサーバーにログインします。
カテゴリ別にデザインを変えるStep1

以下のURLにアクセスしてインフォパネルにログインましょう。

https://www.xserver.ne.jp/login_file.php

STEP.2
ファイル管理にアクセス
カテゴリー別にデザインを変えるStep2

「ファイル管理」を押下しましょう。

STEP.3
sango-themaにアクセス

以下のようにファイルを辿ります。

satoriku.com(自分のドメイン)→public_html→wp-content→thema→sango-thema

STEP.4
single.phpをダウンロード
カテゴリー別にデザインを変えるStep4

single.phpをクリックしてダウンロードします。

②左下にダウンロードされるので、デスクトップにドラッグ&ドロップしましょう。

STEP.5
複製する
カテゴリー別にデザインを変えるStep5

STEP4で、保存したsingle.phpを複製します。

STEP.6
名前を変える
カテゴリー別にデザインを変えるStep6

名前を変えます。

自分の場合は、single-normalsingle-eclipseと名前をつけます。

 

この3つのファイルは以下のように使う
  • single.php→テンプレートを分別する役割
  • single-normal.php→通常のテンプレート
  • single-eclipse→今回自分が作りたいテンプレート
STEP.7
アップロードする
カテゴリー別にデザインを変えるStep7

single-normal.phpsingle-eclipse.phpをXServerにアップロードします。

STEP.8
編集する
カテゴリー別にデザインを変えるStep8-1

single.phpを選択し、編集を押下します。

 

STEP.9
書き換える
カテゴリー別にデザインを変えるStep8-2

single.phpを全て削除し、以下のコードをコピペします。

<?php
if ( in_category('スラッグ') ) { //特定のカテゴリの場合
  get_template_part( 'single-special' , false );
}else { //それ以外の場合
  get_template_part( 'single-normal' , 'normal');
}
?>
STEP.10
スラッグを変える

スラッグというところに、自分が変えたいカテゴリーを入力します。

<?php
if ( is_single('3693') ) {
  get_template_part( 'single-eclipse' , false );
}else {
  get_template_part( 'single-normal' , 'normal');
}
?>

自分の場合は、特定の記事のデザインを変えたかったので、is_single(‘ページID’)と入力します。

スラッグの調べ方
カテゴリー別にデザインを変えるStep8-3

ダッシュボードで、投稿→カテゴリーと進み、変更したいカテゴリーにマウスを当てます。

そうすると、下の方にスラッグが表示されます。

STEP.11
自分の思い通りに作る

あとは、自由にsingle-eclipse.phpをいじるだけです。

完成

これで手順は終わりです。簡単ですね。

この手順で完成したのが、以下のページです。

https://satoriku.com/eclipse/

一気に記事の感じが変わります。このように独自の世界観を出すことができるので、ぜひやってみてください!

参考 WordPressで条件分岐:カテゴリー別にデザインを変える3つの方法サルワカ

あなたにおすすめ

 

147 COMMENTS

naga356

… [Trackback]

[…] There you can find 70703 additional Information on that Topic: satoriku.com/branch-page/ […]

コメントを残す