ワードプレス

WPの固定ページでTopPageとしてのランディングページ(LP)をサイト型にカスタマイズする方法[WP入門-46]

記事がたくさん出来て更新回数が減って来ると、更新されないことが目立つのと、

カテゴリー別などに整理したほうが読みやすいと思うようになりました。

そこでランディングページ(TopPage)を「固定ページ」に作ることにしました。

(当サイトのトップページをご覧ください。)

LPの設定方法

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

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

で作ります。

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

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

記事一覧バナー

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

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

固定ページ記事一覧

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

https://mocarunet.com/blog

としました。

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

追加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(↓)も出来ています。

もかるネットTipPage画像

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

WordPressで稼ぎたい人におすすめ!

初心者から有名ブロガーまでが利用する高速・高性能・安定サーバー

エックスサーバー

wpX Speed