【解決】WordPressで「もっとみる/さらにみる」「show more」の設定の方法(トップページを記事一覧にする)
こちらの「武骨日記」 のような記事一覧の作り方・方法です
検索してもなかなかみつからなかったので記事にしちゃう
やりたいことは
こういうやつ
![【解決】WordPressで「もっとみる」「show more」の設定方法](https://kenjimorita.jp/wp-content/uploads/2020/02/c2af59c50ee6ef77b8d13030cf65d3ac-712x1024.png)
最終的にこれを目指す記事です
![スマホ版。最終的にここまでにする記事です。さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/4b8c67c6f2094813dd0b4d37131f0167-653x1024.png)
![PC版。最終的にここまでにする記事です。さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/7523894f53b0060566df8af01e5cfd81-1024x667.png)
こうなるまでの話です(スタイルはご自身でカスタマイズしてね)
WordPressの公式テーマ使ってだと記事がそのまま列挙されます
前提
・WP触ったことない人向け
・WPをレンタルサーバーで動かしているならそのファイルシステムには入っていける
・テーマはTwenty Nineteen
・ちゃんとやる方法と、とりあえずさくっとやる方法があります
・そのままだと流石にデザイン乏しいのでその後CSSである程度カスタマイズする必要あり
・バックアップはとってある。記事内容は自分の環境下での話です。責任はご自身で
結論
1. 固定ページを作る。page.phpを上書きしてpostを回す
2. それぞれの記事本文にもっと見るタグを挿入する
お好みでstyle.cssを上書きする
です。
背景
佐京さんにブログの作り方を教えていたら
自分でもどうしったっけな...
と思い、
久々にWordPress格闘しました
デファオルとでは記事がトップページに出てきちゃうので見るに耐えないものになるので
どうにかしてリスト形式にしたかった
ちゃんとやる方法は
テーマを「Child」として更新用に作ってその中をいじる(ちょっと説明ながくなるので割愛)
サクッとやる方法は下記
1. 固定ページを作る。page.phpを上書きしてpostを回す
じゃあ固定ページってどうやって作るの?ですが
![【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/8a3c4b47bbc2d71c977e1f75f22a0b46.png)
はい。
作ったらサイトのトップページに設定します
![設定、表示設定を選択【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/5477ff48adc8c99ec54001fa2f3c6712.png)
![今作った固定ページを選択【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/4cff715527fc81a03e86c15391f10e5e-1024x532.png)
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」の設定方法(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/29c53e5565d15521317dde90ca069d7b-1024x792.png)
を出して、スクロールしてもらうと
レイアウトと言う箇所があります
(これ場所わかりづらかった...)
もっと見るの場所。
Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)
で、続きを読む。
![Gutenbergだとここ【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/b23d930c2c9eeebe0f2415c1a4440af8-1024x300.png)
これを記事のトップに挿入します
レガシーなものだと
moreの場所【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)
に存在してて、
![moreの設定場所【解決】WordPressで「もっとみる」「show more」の設定方法(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/2-1024x455.png)
記事の書きはじめに挿入します
最終的に
![スマホ版さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/33899bee69272c51edf80d58723d1f47-1024x616.png)
![PC版さらに見るが表示されています【解決】WordPressで「もっとみる」「show more」の設定の仕方(トップページを記事一覧にする)](https://kenjimorita.jp/wp-content/uploads/2020/02/1ee2c507304dd6d218cd43dd5c3fde14-1024x364.png)
もうこうなると
さらにみる要るかな??って疑問になってきた...
こうなったとおものであとは
CSSをカスタマイズしてください
やりかたは
http://ドメイン/wp-content/themes/twentynineteen/style.css
を上書きすればokだし
出力されるhtmlの構造を変えてclassを当てたかったら
http://ドメイン/wp-content/themes/twentynineteen/style.css
を上書きします
(子テーマを作っていないのでテーマを更新すると上書きされることに注意してください
子テーマの作り方は調べてみてください)
キャッシュによってすぐには切り替わらなかったり、強制リロード、プライバシーモードで変更を確認することもあります
結構ちゃんと説明しようとすると長くなってしまった...
ではー
「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー
株式会社TerraceTechについて
最近起業しました。
・株式会社TerraceTech
SNS
・しずかなインターネット kenjimorita
・インド旅 instagram
・適当な日常写真 instagram
・シュールさーん instagram
・シュールさーん LINEスタンプ
・もりたけんじTwitter
・ネタ帳Twitter
・note
※わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。
※業務連絡やお久しぶり連絡もチャットからお願いします。