ワードプレス・ブログをサイト型にカスタマイズする方法

  • URLをコピーしました!
※本サイトはアフィリエイト広告を利用しています。
もかる

記事が少ない初期のうちは良いんだけれど、記事が増えて来ると古い記事が下層に沈んでしまうんだよね。で、カテゴリ別に整理したくなって、やってみたよ

ワードプレスのプラグインは、非常に便利なため、つい増えてしまいます。

でも増えると、ページスピードを遅くしてしまい、SEO上もよろしくありません。

減らすのは簡単ではありませんが、少しでも減らして幾らかでもページスピードを上げたいところです。

何とか20個以内に収めたいと思い、削りに削った結果をお伝えします。

ここまで直帰率が下がったもう一つの要因は、「ボックスナビ」にあると考えています。

\直帰率激減のもう一つの要因/

回遊率を上げるボックスナビ(メニュー)の作り方 特にテーマJIN[WP入門-47]

目次 タップで飛べます!

LPの設定方法

まずトップページ(ランディングページ)を

サイドバー→固定ページ→新規追加

で作ります。

タイトルは、ここでは「もかるネット TopPage」としておきます。

TopPageに、次に作る「記事一覧」とのリンクを貼っておきましょう。テキストでも画像でも構いません。

同様に、次に今までトップページだった最新記事から並ぶページを「固定ページ」に作ります。

タイトルは、「記事一覧〈新しい順〉」とかにしておきます。

パーマリンクは、当サイトの場合、

ネットライフのザッキオー
新着順記事一覧 | ネットライフのザッキオー ネット生活・巣ごもり生活の友「雑記王」の新着順記事一覧

としました。

テーマのカスタマイズにある「追加CSS

または、

「外観」→「テーマエディター」と進み、子テーマの

style.css」に、

次のコードをコピペします。

拝借元は「じょぶにあ」さんです。

/*トップページおすすめ*/
#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-img_border: 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-img_border: 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;
}
}

タイトルが邪魔な場合は、次のコードも続けてコピペします。

/*タイトル消し*/
.home .entry-title {
display: none;
}

————————————

子テーマ
コピペし「ファイルを更新」をクリック

固定ページを公開してから、次の作業を行います。

サイドバーの「設定」→「表示設定」と進み、赤枠内のように設定します。

以上で、完了です。ドメインでアクセスするとここで作成したTopPageが現れます。

TopPageに最新記事やおすすめ記事を配置する方法

さらにTopPageに新着記事(最新記事)やおすすめ記事などを配置する方法です。

現在、当ブログはそうしたスタイルになっていますが、その方法を分かりやすく説明してくれているサイトがぽんひろ comというサイト。

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

おかげで当ブログのTopPage(↓)も出来ています。

当ブログはJINというテーマを利用していますが、ぽんひろ comの「サイト型カスタマイズ法」も、そのJINを前提としたものです。

テーマがSANGOの方は↓

マクリンブログのようなトップページを実現するカスタマイズ方法【SANGO限定】

目次 タップで飛べます!