支援者募集中!仕事依頼はこちら

どこよりも簡単にJINのトップページをサイト型にカスタマイズ!

JINをサイト型にカスタマイズ オリジナルトップページを作る カスタマイズ

WordPressテーマ「JIN」のトップページカスタマイズ記事です。

トップページをサイト化します!

デフォルト(最初の状態)では記事がズラーっと並べられていますよね。

それを…

  • 新着記事
  • おすすめ記事
  • カテゴリ1
  • カテゴリ2

のように分類できるようにします。

上記は例であり、自分の好きなように自由自在に記事が配置できるようになります。

他のサイトでもやり方が紹介されていますが「どこよりも簡単に!」を目指しました。

デモページを用意したかったんですが当ブログはJINではないので、今回このカスタマイズをご依頼いただいたねこぞーさんのブログをご覧ください。

参考 ねここもり|猫・ゲーム・エンタメの情報サイト

今後、ねこぞーさんブログはカスタマイズで変わる可能性があるので一応イメージ図を用意しました。

JINサイト型カスタマイズサンプル

こんな感じですね!

投稿記事感覚でトップページが編集できるようになっています。

好きなところに好きな記事、文字、画像を入れちゃってください!

それではやり方を見ていきましょう!

手順
  1. CSSをコピペ
  2. 新着記事取得のコードをコピペ
  3. トップページ用固定ページ作成
  4. 記事一覧用固定ページ作成
  5. 設定変更

このような手順となっております。

JINのトップページをサイト型にカスタマイズ

STEP1:CSSをコピペ

下記CSSコードをコピペしてください。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

/************************************
** トップページカスタマイズ
************************************/
.home .cps-post-main{
	padding-top:0;
}
.home .top-wrap{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content:space-between;
	-ms-flex-wrap: wrap;
	flex-wrap:wrap;
	margin-bottom:1rem;
}
.home .top-wrap .blog-card-hl-box{
	display:none;
}
.home .top-wrap .blog-card{
	border:none;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);
	background:#fff;
	padding:0 !important;
	margin:1rem 0 !important;
	flex-basis:48%;
}
.home .top-wrap .blog-card:hover{
	transform: translateY(-3px);
	box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.08);
	opacity:1 !important;
}
.home .top-wrap .blog-card:hover .blog-card-thumbnail img{
	transform:none;
}
.home .top-wrap .blog-card-box{
	display:block;
}
.home .top-wrap .blog-card-content{
	flex:unset;
}
.home .top-wrap .blog-card-thumbnail {
	margin: 0 !important;
	flex: unset;
	overflow: visible;
}
.home .blog-card-title{
	padding:1rem;
}
.home .blog-card-excerpt{
	display:none;
}
.home h1.cps-post-title{
	display:none;
}
.home .cps-post-main-box h2:first-of-type{
	margin-top:0 !important;
}
.home .share-top,.home .share{
	display:none;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
	.home .top-wrap{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction:column;
	}
	.home .top-2{
		-webkit-box-orient: horizontal !important;
		-webkit-box-direction: normal !important;
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
}

STEP2:新着記事を取得するコードをコピペ

新着記事を載せる人は下記コードをコピペします。

子テーマのfunction.phpにコピペしてください。

必ずバックアップを取ってから行ってください。

バックアップとは?

function.phpのファイルだけFTPソフトからダウンロードしといてください。初期から変更していなく、元のファイルが手元にあればバックアップ取る必要はありません。

function new_list_func($atts){
  global $post;
  $arg   = array(
    'posts_per_page' => 4,
    'orderby'        => 'date', 
    'order'          => 'DESC',
  );
  $posts = get_posts($arg);
  foreach($posts as $post):
    setup_postdata($post);
    $str.='<p>';
    $str.= get_permalink();
    $str.='</p>';
  endforeach;
  wp_reset_postdata();
  return $str;
}
add_shortcode('new_list', 'new_list_func');

これは「新着記事のURLを取得するショートコードを作成する」コードです。(紛らわしい)

posts_per_pageの数字が新着記事の数になるので数を変更したい場合は数値を変更してください。

STEP3:トップページ用固定ページ作成

jinトップページ用の固定ページ

固定ページを新規作成します。

タイトルは何でもいいですがサイト名でも入れておきましょう。パーマリンクは変更しないでOK。

とにかく簡単にしたかったのでブログカードを利用しています。

ですので、記事のURLを書くだけでリンクが作れるようになっています。

新着記事を載せたいところは[new_list]と入れてください。

ボタンや見出し、内容は自由に変更してOKです。

とりあえず記事たちを<div class=”top-wrap”></div>で囲っておけばOKです。

<h2>新着記事</h2>

<div class="top-wrap">

[new_list]

</div>

<span class="color-button01-big"><a href="記事一覧固定ページURL">もっと見る [jin_icon_arrowcircle color="#fff"]</a></span>

<h2>おすすめ</h2>

<div class="top-wrap">

リンク先URL

リンク先URL

</div>

<h2>カテゴリ1</h2>

<div class="top-wrap">

リンク先URL

リンク先URL

リンク先URL

リンク先URL

</div>

<span class="color-button01-big"><a href="カテゴリ1ページURL">もっと見る [jin_icon_arrowcircle color="#fff"]</a></span>

<h2>カテゴリ2</h2>

<div class="top-wrap">

リンク先URL

リンク先URL

リンク先URL

リンク先URL
</div>

<span class="color-button01-big"><a href="カテゴリ2ページURL">もっと見る [jin_icon_arrowcircle color="#fff"]</a></span>
注意

改行をいれないとブログカードが上手く表示されないので必ず全て改行をいれてください。

改行
URLの上下は改行を

入力できたら公開してください。

STEP4:記事一覧固定ページ作成

新着記事の下にもっとみるボタンをつける人限定です。必要ないという方はやらないでも大丈夫です!

JIN記事一覧用固定ページ

新しく固定ページを作成。

これまたタイトルは何でもいいですがわかりやすいように「記事一覧」としましょう。

パーマリンクも何でもいいのですがわかりやすいように「ドメイン/articles」に設定します。

他は何も変更せずに公開します。

先ほど公開したトップページ用固定ページを開き、新着記事のもっとみるボタンのリンクURLを「ドメイン/articles」に変更しておきましょう。

STEP5:設定変更

JINトップページ表示設定

WordPressの管理画面→設定から表示設定を選択します。

ホームページの表示→固定ページにチェック

セレクトボックスからそれぞれ下記の通り選択します。

  • ホームページ:トップページ用の固定ページ
  • 投稿ページ:記事一覧の固定ページ

変更を保存!

これにて終了です!

その他さらにカスタマイズする!

カスタマイズ後、さらにアレンジしたい向けです。

カテゴリを絞った新着記事を自動取得する方法

カテゴリを絞って新着記事を自動で表示させます。

function.phpを編集します。必ずバックアップを取ってから行ってください。

function.phpに下記コードをコピペしてください。

/* カテゴリ別最新記事取得 */
function cat_list_func($atts) {
    extract(shortcode_atts(array(
        "num" => '',
        "cat" => ''
    ), $atts));
    global $post;
    $posts = get_posts('numberposts='.$num.'&order=DESC&orderby=date&category='.$cat);
    foreach($posts as $post) :
    $str.='<p>';
    $str.= get_permalink();
    $str.='</p>';
    endforeach;
    wp_reset_postdata();
    return $str;
}
add_shortcode("cat_list", "cat_list_func");

こちらは「カテゴリを絞った新着記事のURLを取得するショートコードを作成する」コードです。(紛らわしい)

HTML(投稿画面)の方にはこのように入力します。

<h2>カテゴリ1</h2>

<div class="top-wrap">

[cat_list cat="2" num="4"]

</div>

○ カテゴリを絞って新着記事取得するショートコード

[cat_list cat="○" num="●"]

catの中にはカテゴリー番号を入れます。

カテゴリ番号調べ方

WordPress管理画面カテゴリー調べたいカテゴリを選択。
URLに番号が表示されます。

カテゴリナンバー

ちなみに複数のカテゴリを対象にしたい場合はcat=”2,3″のように複数のカテゴリ番号を書けばOK!

numの中には取得する数を入れます。2記事表示したければ2と入れてください。

余白と枠線を消す方法

jinトップページの余白消す

この緑の部分と周りの枠線を消します。

下記CSSを追記してください。

.home .cps-post-box{
    padding: 0;
    box-shadow: none;
}
@media(min-width: 1024px){
    #main-contents {
        margin-top:-15px;
    }
}

数値は自由に変更してください。

スマホでも2カラムにする方法

スマホでも2カラムにする

トップページの固定ページを開きます。

2カラムにしたいところ、例えば新着記事の場合。

<h2>新着記事</h2>

<div class="top-wrap top-2">

[new_list]

</div>

<span class="color-button01-big"><a href="記事一覧固定ページURL">もっと見る [jin_icon_arrowcircle color="#fff"]</a></span>

top-wrapの後ろにtop-2というクラスを入れればスマホで見たときに2カラムになります。

タイトル部分を消す方法

JINタイトルを消す

CSSに下記コードを追記します。

○ 1カラムの場合

.home .top-wrap .blog-card-content{
	display:none;
}

スマホ時だけ消したい場合は…

@media screen and (max-width: 480px){
	.home .top-wrap .blog-card-content{
		display:none;
	}
}

○ 2カラムの場合

.home .top-2 .blog-card-content{
	display:none;
}

スマホ時だけ消したい場合は…

@media screen and (max-width: 480px){
	.home .top-2 .blog-card-content{
		display:none;
	}
}

これでOKです。

ディスクリプションが反映されない問題

固定ページをトップページにするとディスクリプションが反映されてないと連絡がありました。

対策方法を別記事にまとめましたのでよかったらご覧ください。

あわせて JINで固定ページをトップにするとディスクリプションが2つに重複する問題

JINで固定ページをトップにするとディスクリプションが2つに重複する問題
JINで固定ページをトップページにした時に「description(ディスクリプション)が重複する問題」と「OGPのディスクリプションが反映されない問題」を解決する方法です。ogp.phpとheader.phpを編集していきます。公式がいつかアップデートで修正してくれる可能性がありますがそれまでの対処方法になります。

当ブログを参考にしてくれた人紹介!

この記事を読んでいただき、サイト型にカスタマイズをしていただいたブログを紹介します。

ご連絡いただければ紹介させていただきます!

カスタマイズ随時更新&受付中!

他にもトップページのカスタマイズアレンジを随時アップしていきます。

「こんなカスタマイズがしたい!」など要望があればコメント欄、問い合わせフォーム、ツイッターからご連絡ください。

トップページに限らなくてもOKです。

他にもブログカスタマイズやってます!

他にもカスタマイズをやってますので良かったらご覧ください!

あわせて 【JIN】スマホヘッダーを固定追尾させるカスタマイズ

【JIN】スマホヘッダーを固定追尾させるカスタマイズ
JINをスマホで見たときにヘッダーを固定するカスタマイズ。コピペで簡単にできます。常時固定、スクロール時に小さくする、スクロール時に非表示にする、の3通り選べるようになっています。また、JINの子テーマでJavaScriptを使う方法も公開しています。

あわせて ブログカスタマイズまとめ【ブロガー、アフィリエイター向け】

ブログカスタマイズまとめ【ブロガー、アフィリエイター向け】
ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。

コメント

  1. いつも参考になる記事ありがとうございます。
    早速試してみたところ、記事がブログカード(あわせて読みたい)で表示され縦に並んでしまいます。
    ブログカードにせず記事を表示させるにはどのようにしたら良いのでしょうか?

    • >takaさん

      ありがとうございます。
      このカスタマイズはブログカードをCSSで見た目を変更しています。

      おそらく、CSSが適用されていないのが原因かと思います。
      入力してるファイルが合っているかどうか確認してみてください。

ページトップへ