Twitterはこちら仕事依頼はこちら

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

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

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

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

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

それを…

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

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

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

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

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

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

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

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

こんな感じですね!

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

Twitter

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

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

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

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

こちらのサイトで注意点などわかりやすくまとめていただいてます!

参考 【JINカスタマイズ】トップページをサイト型に変更!失敗談コード貼付場所

スポンサーリンク

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の管理画面→設定から表示設定を選択します。

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

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

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

変更を保存!

これにて終了です!

CSSが反映されない場合

CSSが反映されない場合は以下を確認してください。

  • キャッシュが残っていないか
  • プレビュー画面で確認をしていないか
  • コピペする場所は間違っていないか

キャッシュはスーパーリロード(Ctrl+F5 or Shift+F5)をすれば強制更新できます。

このCSSはトップページに設定してはじめて動くものなので実際に公開しないと確認ができません。

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

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

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

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

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を編集していきます。公式がいつかアップデートで修正してくれる可能性がありますがそれまでの対処方法になります。

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

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

リンクが増えてきたのでこれで締め切らせていただきます!ご協力ありがとうございます!

この記事を参考にして作成し、
SNSやブログでこの記事を紹介していただいた方はこちらでブログを紹介させていただきます!

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

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

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

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

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

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

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

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

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

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

コメント

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

    • >takaさん

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

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

  2. こんにちわ!
    カスタマイズ真似させてもらいました。
    ありがとうございます!

    h2タグが反映されないのですが、何故かわかりますでしょうか?
    あと、2カラムの設定が、記事通りでは上手くいきませんでした。

    アドバイスあればお願いします;;
    お手数かけてすいません・・・

    https://muffin05k.com

  3. >まふぃんさん

    こんにちは!

    トップページの編集画面で右側にあるページ属性がLPになっていませんか?
    デフォルトに変更してもらって反映されるか確認してみてください。

    • 親切に回答ありがとうございます。

      どうやらこのやり方で見出しは出るようです。
      [lp-h2 style=”3″]新着記事[/lp-h2]
      同じような方いたら参考になれば嬉しいです。

      ちなみにLPのままでやれました。

      • >まふぃんさん

        そうなんですね!参考になります。
        ありがとうございます!

  4. 記事を拝見させて頂きTOPページカスタムに成功しました。
    本当に有難うございます。

    カスタムに成功しましたが、ページャー?で追加される

    https://○○/page/2/
    https://○○/page/3/
    https://○○/page/4/



    ぽんひろさんのサイトで言うと
    「https://ponhiro.com/page/2/」など
    のページをnoindexに設定することは出来ませんでしょうか?

    • >無知識おじさん様

      良かったです!

      もっと見るのページでしたら記事一覧の固定ページの編集画面でnoindex設定にチェックを入れればOKかと思います。

      • 返信さリが頭御座います!!

        もっと見る ではないです。。。
        ぽんひろさんのサイトでいえば
        https://ponhiro.com/page/2/
        https://ponhiro.com/page/3/
        https://ponhiro.com/page/4/
        .
        .
        .
        というURLになる部分なのですが、こちらにnoindexをつけることは出来ないものかと。。

        • 返信さリが頭御座います!!
          は誤字です。。。すみません。

          返信ありがとうございます!!に訂正をさせて下さい!!

          • >無知識おじさん様

            こちらのサイトが参考になるかと思います!
            http://afi8.com/2014/06/29/10598/

  5. スマホ2カラム表示の際に、アイキャッチ画像が崩れているところが出てくるのですが、対処法とかあれば教えていただけるとありがたいです。

    • >たまさん

      どんな感じに崩れてしまいますか?

  6. 大変参考になります!
    本当にありがとうございます。

    スマホで2カラムを設定するとスマホでもパソコンでもブログカードにその記事のタイトルが出てこない(アイキャッチ画像だけになる)ということが起こってしまいます。
    なにか私の設定が悪ければ申し訳ないのですがご教授頂けると幸いです。

    • >がめつかないがめらさん

      ありがとうございます!

      見てみないとわからないのですが「タイトル部分を消す方法」の方を間違えて入力してるとかではないでしょうか?

      2カラムにする場合はHTMLを追加するだけで大丈夫です!

      • 「タイトル部分を消す方法」の解釈を勘違いしていました。解決しました。ありがとうございます。
        追って質問で申し訳ないのですが今回の方法でトップページを作成するとブログカードの記事タイトルのフォント(トップページに表示されるもの)が他のページのものよりも若干大きくなってしまいます。
        この問題を解決する方法はありますでしょうか?
        がめついて申し訳ありません。

        • >がめつかないがめらさん

          タイトルの文字大きさは下記CSSで変更可能です!

          .home .blog-card-title{
          font-size:○rem;
          }

          ○に数値を入れてください。

          • またもや丁寧にありがとうございます!
            調整してみますね!

  7. ぽんひろさんのおかげで、トップページを固定ページできました。有益な情報ありがとうございます。

    1つだけ困ったことがあり調べたのですが解決できず、もし何か解決策があれば教えて頂きたいのですが…

    トップページのアイキャッチ(サムネイル画像)がパソコンで閲覧した時のみ本来の半分ほどのサイズになってしまい枠内に余白ができます。

    携帯から見たときや、各カテゴリページに飛ぶと適切なサイズで表示されています。

    ▽サイト情報・試したこと
    ・トップページカスタマイズのCSSのコピペしなおし⇒変わらず
    ・1カラム、2カラムの変更⇒変わらず
    ・ページ属性⇒デフォルトテンプレート
    ・その他の追加CSS⇒目次を中央に揃えるテンプレートのみ
    ・設定>メディア設定⇒デフォルト(サムネイル幅150・高さ150)
    ・「その他さらにカスタマイズする!」⇒2カラムのみ適用

    お忙しいのに本当に申し訳ないのですが、もし何か原因、対処法があれば教えて頂けると嬉しいです。

  8. こんばんは。↑↑のトップページのアイキャッチ(サムネイル画像)がパソコンで閲覧した時のみ本来の半分ほどのサイズになってしまう件ですが解決しました。

    お騒がせしてすみませんでした。
    これからも更新楽しみにしています!!

    • >まるさん

      コメントありがとうございます!
      解決したようでよかったです!

  9. ぽんひろさん、大変わかりやすい解説をありがとうございます。
    参考にさせていただいております。

    解決できないことがあり、ご相談させていただきます。
    『合わせて読みたい』が消えておらず、2カラムにならないまま縦に並んでしまいます。

    キャッシュのクリアやプラグインが邪魔していないかも確認し、
    なんども一からやり直してみました。

    ステップ1は、『外観→カスタマイズ→追加CSS』に貼り付けています。

    固定ページはデフォルトのまま1行あけて作成し、
    新着記事の読み込みは綺麗にできました。

    追加CSSに、『合わせて読みたいコードを消す』コードを別で追加してみたところ消えたので、追加CSSが反映されないわけではなさそうです。。

    ど素人のため、解決策が思い浮かばず、
    もし何か解決策がありそうでしたらお教えいただけますと幸いです。

    • >うみさん

      コメントありがとうございます!

      同様の報告をされた方がいましたがその方はプレビュー画面で確認をしていました。

      プレビュー画面では反映されないので実際に公開してみてください。説明不足で大変申し訳ございません。

      • ぽんひろさん

        早速のお返事、本当にありがとうございます!!

        公開にしたところ、きちんと設定できていました。
        勉強不足で申し訳ありませんでした。

        ぽんひろさんのおかげで、大変見やすく、理想通りの形にできました!
        感謝しています。
        これからも参考にさせていただきます!

  10. お世話になります。

    一点ご質問なのですが,新着記事一覧のショートコードで投稿日時まで取ってくるようなphpはどのようにして書けば良いでしょうか…?

    • >jinさん

      こんにちは、コメントありがとうございます。
      このカスタマイズですとブログカードの見た目を変更して表示してるだけなので投稿日時の取得はできません。

      ブログカードを取得するPHPのコードを変更する必要がありますが、PHPに詳しくない場合はあまりオススメしません。

      JINのフォーラムで要望を出せばもうしかしたら反映していただけるかもしれません。

  11. ぽんひろ様

    JINのカスタマイズかなり参考にさせていただいております。
    1点質問なのですが、新着記事を自動で表示するコードですが、PCだと2記事×2列で表示されていますが、これを4記事×1列にしたい場合はどのようにすればよろしいでしょうか?

    今のトップページのサムネイルと同じぐらいのサイズ感に調整したいと思っておりますので、調整する場所をご教示いただけますと幸いです。

    https://kinjyo8835.com/

    • >ちかどころさん

      ありがとうございます。

      .home .top-wrap .blog-cardにある
      flex-basisという箇所が横幅になります。

      4列なので25%以下に設定すれば4列になるかと思います。

      • ぽんひろ様

        ありがとうございました!無事出来ました!
        ご対応いただきありがとうございます。

ページトップへ