【JINカスタマイズ】固定トップページでサイト型に変更する方法~SANGOコードを応用~

JINカスタマイズ 固定トップページ サイト型

 

この記事はワードプレステーマ『JIN』を利用している方向けです(*^^*)

こはる
こはる
固定ページをトップにして、ブログじゃなくサイト風にしたい

SANGOの固定トップページカスタマイズを見て、ずっと思っていました。

運営していくうえでの大きな理由も・・・。

 

検索すれど『JIN用』のカスタマイズが見つからない( ;∀;)

自分ではできないと諦めていましたが、あることをキッカケにお尻に火がつき、必死の思いで固定のトップページをつくりました。

ここでの固定トップページは【サイトURL(https://koharu-lifehack.net/)】にアクセスすると、そのページが表示される仕様のことです
パソコン表示
JINカスタマイズ LPページ
スマホ表示

JINカスタマイズ LPページ

トップページがこんな感じになります。

パソコン知識が無いのでコードの中身が合ってるか不明ですが、何とか形になったかな?

 

カスタマイズの備忘録と、変更したことで改善された点を最後にまとめました。

JINユーザーどなたかのお役に立てたら嬉しいです。

すごい人
すごい人
このコードはこうだよ

という点があれば、よければ教えてくださいm(__)m

この記事でわかること
  • JIN用:サイト型トップ固定ページの作り方
  • 固定ページのタイトルの消し方
  • お尻に火がついたわけ(興味のある方だけ)
  • 変更後の改善ポイント

このカスタマイズを行うにあたって、SANGOを利用している「りらさん@rila_srich)」の記事をベースにさせて頂きました。

\ ありがとうございます /


固定トップページを作成

まずはトップに表示するページをつくります。

固定ページの設定

ダッシュボード→固定ページ→新規追加の順で作成。

固定ページのパーマリンクはそのまま、タイトルはわかりやすいものに設定。

JINカスタマイズ 固定ページ

 

作成画面の右側にある「固定ページの属性」を「LP」に変更します。

JINカスタマイズ LPページ

LPとは?

ランディングページのこと。
LPページは紹介するコンテンツの魅力を最大限に見せるため、あえて機能(サイドバー / フッター等)を削ぎ落とした作りとなっています。

JIN公式:https://jin-theme.com/manual/lp-making/より引用

 

プレビューで見るとタイトルが表示されますが、最後の「固定ページのタイトルの消し方」で消えるので大丈夫です(*^^*)

おすすめ記事をつくる

ピックアップコンテンツ風のおすすめ記事を設定します。

SANGOのショートコード部分を、JINのショートコードに置き換えています。

 

テキストエディタに下記のhtmlコードを貼りつけてください。

エディタにある【】内を埋めていきましょう。

  • おすすめ記事のURL
  • アイキャッチ画像のURL
  • 記事のタイトル
  • 画像のサイズ(width=”【ヨコ】” height=”【タテ】”)

これらを自分のサイトからコピーしてきます。

画像のサイズは、当サイトと同じ大きさなら『width=”336″ height=”188″』のままで大丈夫です。

画像のURLを知る方法

ダッシュボード >メディア >ライブラリ >対象画像の【編集】の順にひらいて、URLを取得してください(*^^*)

JIN カスタマイズ

カテゴリ別おすすめ記事を設定する

次はカテゴリにわけて記事をいれます。

テキストエディタのおすすめ記事htmlコードの続きに以下のコードを入れてください。

こちらも【】になっている部分を入力していきます。

  • 表示するカテゴリ名
  • 画像の挿入(あってもなくてもOK)
  • リスト式に記事を貼っていく
  • カテゴリのURL

ビジュアルエディタで編集しても大丈夫です(*^^*)

 

JINのLP用h2見出しは現在3種類あります。

このデザインを変えたい場合は「lp-h2 style=”1″」の数字を変更してください。

2019年2月現在、1~3まで対応しています。

 

ちなみに先ほどのhtmlコードは2カラム、こちらが3カラム用です。

わたしはパソコン表示のときに、上段が2カラム・下段に3カラムと組み合わせています。

>>こはらいふのトップページを見てみる

お好きな方を貼りつけてください。

 

JINのショートコードは公式「JIN MANUAL」に載っていますよ。





スタイルシートでシュッとさせる

この段階でプレビューを確認しても綺麗に表示されません。

スタイルシートに手を加えて、シュッとした固定ページが完成します(*^^*)

必ずバックアップを取ったうえでお願いします

「外観→テーマの編集」を開いたら「style.css」に、以下のコードを貼りつけます。

こちらはSANGO用と変わりません。

/*トップページおすすめ*/
#pickup{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:0.5em;
  margin-bottom:2em;
}
#pickup .pickup_post{
  width:24%;
}
@media only screen and (max-width: 767px) {
  #pickup .pickup_post{
    width:48%;
    margin-bottom:1em;
  }
}
#pickup .pickup_post a img{
  box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
  border-radius:2px;
  transition: .3s ease-in-out;
}
#pickup .pickup_post a img:hover{
  box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}

/*トップページの見出し*/
h2.top_menu {
  border-left:none;
  background-color:#fff;
  color:#000;
  overflow: hidden;
  text-align: center;
}
h2.top_menu span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}
h2.top_menu span::before,
h2.top_menu span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 400%;
  height: 1px;
  background-color: #000;
}
h2.top_menu span::before {
  right: 100%;
}
h2.top_menu span::after {
  left: 100%;
}
@media only screen and (max-width: 767px) {
  h2.top_menu {
    font-size:1em;
  }
}

 

ファイルを更新したら、プレビューから確認してください。

変わっていない場合はキャッシュ削除を行ってくださいね!

キャッシュ削除と再読み込みの仕方
  • Chromeは『Ctrl+F5』
  • Macは『Command + Shift + R』
  • プラグイン『WP Super Cache』をつかっている方は、キャッシング設定の停止/利用も確認

記事一覧用の固定ページを作成

先ほど作ったあたらしい固定ページがトップページになるため、既存のトップページは今からつくる「記事一覧用」で表示されます。

 

「ダッシュボード→固定ページ→新規追加」の手順で新しい固定ページを作成。

タイトルは「記事一覧」パーマリンクは「blog」と入力します。

このページはこれで完了!

このまま【公開】してください。

 

最初につくった固定ページの【記事一覧URL】の欄に、この固定ページのURLを入力します。

こんな感じになります赤字が入力した部分(‘◇’)ゞ

<center><span class=”color-button02″><a href=”https://koharu-lifehack.net/blog/“><i class=”fa fa-folder-open” aria-hidden=”true”></i> 最新記事をチェック</a></span></center>

トップページの表示設定を変える

もうあと一息!

今のままでは、ページは作られて公開されているもののトップには表示されていません。

ダッシュボードから「設定→表示設定」を選択。

JINカスタマイズ 固定ページ

 

ホームページの表示は「固定ページ」を選択

  1. ホームページを「固定トップページ」
  2. 投稿ページを「記事一覧」

と設定し変更を保存すれば完了です(*^^*)

JINカスタマイズ 固定ページ

これで完成!

・・・なのですが、なぜかわたしは「固定ページのタイトル」が表示されてしまいました( ;∀;)

表示されちゃってる方は次で完結です!

固定トップページのタイトルを消す

タイトルを空欄にしても良いのですが、そうすると異常に空白があいてしまいます。

スタイルシートに、ちょちょっと書き足してください。

必ずバックアップを取ったうえでお願いします

「外観→テーマの編集」を開いて「style.css」に貼りつけします。

/*-----------------------
 固定トップタイトル非表示
------------------------*/
.home .entry-title {
  display: none;
}
/* ここまで */

 

こちらの記事を参考にしました(*^^*)

新着記事をいれる

こちらはお好みで、新着記事を入れたい場合の設定です。

2019年2月13日更新

タブレットで表示すると起こる不具合にphpが干渉しているかもしれないため、プラグインでの新着記事表示方法をアップしました

function.phpもさわらず実装できるので「プラグイン『WP Show Posts』で新着記事を楽にカスタマイズする手順」のやり方を推奨しています。

WP Show Posts JIN 使い方
【JIN】プラグイン『WP Show Posts』でアイキャッチ付き新着記事を表示するやり方サイト型の固定トップページに、アイキャッチ付き新着記事を簡単に実装できます。タブレットで表示すると起こる不具合も解消。JINユーザー向けカスタマイズ記事。...

 

function.phpをさわる、以下のカスタマイズも備忘録として残しています

固定ページの新着記事を表示させたい位置(テキストエディタ)に、下記のコードをいれてください。

この時点では、まだちゃんと反映されていません。

この項目では「functions.php」に入力します。
ぜったい!必ず!バックアップを取ったうえでお願いします

次に、以下のソースコードを「外観→テーマの編集→functions.php」を開いて貼りつけます。

プレビューで確認してみてくださいね。

新着記事のコードはこちらの記事を参考にさせて頂きました(*^^*)





まとめ

このカスタマイズの手順をザッとおさらい!

こんな感じでできました(‘◇’)ゞ

記事にするにあたって再入力してチェックしなおしましたが、カスタマイズ前にはバックアップを必ずとって行ってください。

 

テーマをJINにした理由は「JINはパソコン知識0でもすぐ記事が書ける」をお読みください。(書き直し・追記したいところが多すぎて)

Word Press初心者におすすめのテーマ『JIN』パソコン知識0でもすぐ記事が書ける このブログはWordpress有料テーマの「JIN」をつかっています。 わたしは元々パソコンの知識が全くと言っていいほどあ...

最後に当サイトの運営記録と改善された点をまとめました。

固定トップ変更後の改善ポイント

わたしが必死になって作成した理由はトップページの直帰が多かったからです。

このサイトは特定のキーワードで、トップページへの流入が多いのですが直帰率が気になっていました(@_@。

 

新着記事がずらりと並んだデフォルトの状態だと

  • このサイトで解決するのか分からない
  • 知りたいことがどこにあるか見つからない
  • サイトマップへのひと手間が面倒

実際にわたしが、検索してトップページにやってきたらこう思うはず( ;∀;)

なので、サイト型のトップページが必要でした。

 

まだ変更して数日ですが、トップページの直帰率は約4%減っています。

今後どうなるかな?

 

ちなみに、固定トップページに変更してサイトの速度が大幅に改善されました。

使用しているサーバーは「ロリポップ!(スタンダードプラン)」ですが、カスタマイズ前は7秒だったのが3秒に!

サイト速度 ロリポップ

参考:Google モバイルサイト

ロリポップを選んだ理由は「ワードプレス初心者「こはらいふ」運営の裏側」に記録しています。

 

時間などで多少、前後しますが、こちらの速度測定では34から40に改善しました。

スピードテスト サイト速度

参考:Page Speed Insights 

トップページの画像が少なくなるので、速度が改善されるかもと思ったのもお尻に火がついた理由です(*^^*)

スピードも改善されて、読む側の負担が減るとうれしいですよね!

 

同じことを気になっている方。

一気にやらなくても、できるカスタマイズなので試してみてくださいね!

 

こはる
こはる
最後までお読みいただき、ありがとうございました

 

\ 家計に関するまとめ記事はこちら /

やりくり・家計管理の方法についてまとめた記事は「貯金を成功させるための家計管理術」を。

家計簿など支出に関することは「【年収400万円】4人家族の家計|収入・支出・節約に関するまとめ記事」をご覧ください。