カスタマイズ

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

 

トップページを「新着、おすすめ、カテゴリー毎」にまとめて見やすくしたい!

と思ったことはありませんか?

 

私はアフィリエイトを本格的に勉強してから、「変えたい!」とずっと思っていました。

トップページなのに、新着順で記事がずらっと並んでいるだけだと味気ないですよね。

 

トップページはブログに来てくれた方が最初に見るページ

そのページを「見やすく、まとまった感じ」にするだけで、ブログ上級者感が出ますよね!

 

ということで、アフィリエイター上級者を目指す、専業主婦の夏目C4(@Ntm625C4)がトップページをサイト型に変更してみたいと思います。

 

今回、参照させて頂くのは「ぽんひろ様」の

です。

 

イメージは、上から「新着、おすすめ、カテゴリー1、カテゴリー2、・・・」

トップページ イメージ図

 

作業はたったの5ステップ!10分で終わるはずが、、、

私はコードの貼付け場所を間違えた為、2日もかかってしまいました。

  • コードは編集画面の「テキスト」に貼りましょうね!

 

夏目C4
夏目C4
それでは、トップページをサイト型に変更して行きたいと思います!

 

JINとは:アフィリエイトのノウハウが凝縮されたWordPressテーマ

アフィリエイトのノウハウが凝縮されたWordPressテーマJIN

 

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

全体の流れ

  1. CSSのコピー(ぽんひろさんのサイトより)
  2. 新着記事を取得のコードをコピペ
  3. トップページ用、固定ページを作成
  4. 記事一覧用固定ページ作成
  5. 設定変更

 

夏目C4
夏目C4
それでは、トップページ変更作業を開始して行きましょう!

 

1.CSSのコピー

「ぽんひろ様」のサイトより、CSSのコピーをします。

 

トップページをサイト型に変更

 

・外観⇒ CSS編集を開き、先ほどのコードをペーストします。

トップページをサイト型に変更

 

2.「新着記事を取得」のコードをコピー&ペースト

新着記事を表示させたい方のみ、行ってください!

新着記事を取得する為のコードをコピーし、function.phpにペーストします。

コードを貼り付ける前に、テキストなどに「function.php」の内容をコピーして保存しておいて下さい。

カスタマイズ後に問題がある場合は、コピーしたものを貼り直せば元に戻りますので安心して下さい!

 

「ぽんひろ様」のサイトよりコードをコピー

 

トップページをサイト型に変更

 

子テーマのfunction.phpにコードを張り付け

・外観⇒ テーマエディター⇒ テーマの為の関数(function.php)

トップページをサイト型に変更

コードをペースト後、ファイル更新をクリックします。

 

3.トップ用、固定ページを作成

トップ用の固定ページを作成します。

「ぽんひろ様」のサイトよりコードをコピー

 

・固定ページで新規追加をクリック

・タイトルにサイト名

・パーマリンクはそのままで

・新着記事を載せたい人は「new-list」を追加

コードの貼付けは、ビジュアルではなくテキストです!

 

トップページをサイト型に変更

 

ボタン、見出し、内容は自由に変更が出来ます。

夏目C4
夏目C4
編集が終われば「更新」をクリックします。

 

4.記事一覧用固定ページ作成

※新着記事の下に「もっとみるボタン」をつける人用です。不要でしたら飛ばしてくださいね。

記事一覧用の固定ページを作成します。

・固定ページ⇒ 新規追加

トップページをサイト型に変更

タイトル:記事一覧

パーマリンク:「ドメイン/articles」に設定

 

3.で作ったトップ用固定ページを開き、新着記事の「もっと見るボタン」のURLを「https://ドメイン/articles」に変更します。

トップページをサイト型に変更

 

夏目C4
夏目C4
ドメインの所は、自分のサイトのURLを入れます。

 

5.設定変更

設定の変更をします。

・設定⇒ 表示設定

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

セレクトボックスから下記を選択して、保存します。

  • ホームページ:トップページ用の固定ページ
  • 投稿ページ:記事一覧の固定ページ
トップページをサイト型に変更

 

トップページがサイト型に変更されているか、チェックしてみて下さいね。

以上で、作業は終わりです!ちゃんと表示されましたか?

 

夏目C4
夏目C4
私は、上手く表示できずに2日位悩んでました、、、

 

失敗談:トップページにHTMLが表示問題発生

設定変更後、ブログのトップ表示を確認してみると、、、

HTMLが表示されてる!!

何かがおかしいみたいですが、原因が分からず。

参考にさせてもらった、

かわいいブログ「リトルハッピープラス」の

「もくりんぐさん(@mokurin1979)、」に相談すると。

キャッシュ消すといいかも?と言われて実行。

まだ、表示が直らない。

何が悪いのか分からないので、コードを全部消して最初からやり直す事に。

 

トップページ用にコードを貼り付ける時に、ふっと気付いた!

あれ、ビジュアルじゃなくて、テキストにコード貼るんじゃなかろうか?と。

やってみると、出来ました!

もくりんぐさん(@mokurin1979)、お手数をおかけしました!

 

夏目C4
夏目C4
皆様は間違えないようにしましょうね!

 

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

今回は「JINカスタマイズ トップページをサイト型に変更」を紹介しました!

参照させて頂いた「カスタマイズコード」は、「ぽんひろ様」です。

 

夏目C4
夏目C4
見やすいトップページをありがとうございます!

 

カスタマイズ後さらにアレンジをしたい方は、ぽんひろ様のサイトにてご参照をお願いいたします。

ここまで読んで頂き、ありがとうございました。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で夏目C4をフォローしよう!

ABOUT ME
アバター
夏目 C4
ゲーム好きの男子園児を育てている専業主婦です。在宅でも出来る副業を求めて活動中!ゲーム・You Tube・ブログ運営・子育てでお悩みの方をお手伝いすべく、日々ブログ更新をしています!

COMMENT

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください