スマホ版さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

【解決】WordPressで「もっとみる/さらにみる」「show more」の設定方法(トップページを記事一覧にする)

【解決】WordPressで「もっとみる/さらにみる」「show more」の設定の方法(トップページを記事一覧にする)

こちらの「武骨日記」 のような記事一覧の作り方・方法です

検索してもなかなかみつからなかったので記事にしちゃう

やりたいことは

こういうやつ

【解決】WordPressで「もっとみる」「show more」の設定方法

【解決】WordPressで「もっとみる」「show more」方法

最終的にこれを目指す記事です

スマホ版。最終的にここまでにする記事です。さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

スマホ版。最終的にここまでにする記事です。さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

PC版。最終的にここまでにする記事です。さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

PC版。最終的にここまでにする記事です。さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

https://terracetech.jp/

こうなるまでの話です(スタイルはご自身でカスタマイズしてね)

WordPressの公式テーマ使ってだと記事がそのまま列挙されます

前提

・WP触ったことない人向け
・WPをレンタルサーバーで動かしているならそのファイルシステムには入っていける
・テーマはTwenty Nineteen
・ちゃんとやる方法と、とりあえずさくっとやる方法があります
・そのままだと流石にデザイン乏しいのでその後CSSである程度カスタマイズする必要あり
・バックアップはとってある。記事内容は自分の環境下での話です。責任はご自身で

結論

1. 固定ページを作る。page.phpを上書きしてpostを回す
2. それぞれの記事本文にもっと見るタグを挿入する
お好みでstyle.cssを上書きする

です。

背景

佐京さんにブログの作り方を教えていたら
自分でもどうしったっけな…
と思い、
久々にWordPress格闘しました
デファオルとでは記事がトップページに出てきちゃうので見るに耐えないものになるので
どうにかしてリスト形式にしたかった

ちゃんとやる方法は
テーマを「Child」として更新用に作ってその中をいじる(ちょっと説明ながくなるので割愛)

サクッとやる方法は下記

1. 固定ページを作る。page.phpを上書きしてpostを回す

じゃあ固定ページってどうやって作るの?ですが

【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

はい。

作ったらサイトのトップページに設定します

設定、表示設定を選択【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

設定、表示設定を選択【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

今作った固定ページを選択【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

今作った固定ページを選択【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

page.phpを上書きする

ファイルはテーマをそのまま使っている方は

http://ドメイン/wp-content/themes/twentynineteen/page.php

です

こちらをまるっとコピペ
・page.phpが既にカスタマイズされていないか注意してくださいね(子テーマで上書きしている場合そちらを更新してくださいね)
こちらはtwentynineteenのデフォルトpage.phpを更新する場合に限りまるっといけます。

(子テーマを作っていないのでテーマを更新すると上書きされることに注意してください
子テーマの作り方は調べてみてください)

Style.cssを上書きする

ファイルはテーマをそのまま使っている方は
http://ドメイン/wp-content/themes/twentynineteen/style.css

(子テーマを作っていないのでテーマを更新すると上書きされることに注意してください
子テーマの作り方は調べてみてください)

記事にもっと見るタグをつける

ここ新しいエディタだとなかなか見当たらなかった…

WPのエディタにはGutenbergとレガシーなタイプがあります。

Gutenbergだと

 

Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

を出して、スクロールしてもらうと

レイアウトと言う箇所があります

(これ場所わかりづらかった…)

もっと見るの場所。 Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

もっと見るの場所。
Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

で、続きを読む。

Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

これを記事のトップに挿入します

レガシーなものだと

moreの場所【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)moreの場所【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

に存在してて、

 

moreの設定場所【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)

moreの設定場所【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする

 

記事の書きはじめに挿入します

最終的に

スマホ版さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

スマホ版さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

PC版さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

PC版さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)

もうこうなると
さらにみる要るかな??って疑問になってきた…

https://terracetech.jp/

こうなったとおものであとは

CSSをカスタマイズしてください

やりかたは

http://ドメイン/wp-content/themes/twentynineteen/style.css

を上書きすればokだし

出力されるhtmlの構造を変えてclassを当てたかったら

http://ドメイン/wp-content/themes/twentynineteen/style.css

を上書きします

(子テーマを作っていないのでテーマを更新すると上書きされることに注意してください
子テーマの作り方は調べてみてください)

 

キャッシュによってすぐには切り替わらなかったり、強制リロード、プライバシーモードで変更を確認することもあります

 

結構ちゃんと説明しようとすると長くなってしまった…

ではー


「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
株式会社TerraceTech

SNS
インド旅 instagram
適当な日常写真 instagram
シュールさーん instagram
シュールさーん LINEスタンプ
もりたけんじTwitter
ネタ帳Twitter
note

FaceBook -kennji.morita-

わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。

(Visited 1 times, 1 visits today)