トップページに新着情報を表示したい

解決済 3mcdt
(@3mcdt)

8ヶ月前

テーマはLightningです。現在は、「新着情報」を固定ページの一つとしていますが、これを現在の内容を含めてそのままトップページに表示したいです。今はトップページに「サイト紹介文」を掲載していますが、それは削除してその代りに新着情報を表示する考えです。調べたところ、All in one Expansion （現在使用中）の「VK最新の投稿」ウィジェットを使うのがよさそうですが、それで良いのでしょうか？　そうだとすると外観→ウィジェット→VK最新の投稿で「トップページコンテンツエリア上部」選べば良いのでしょうか？　予め「サイト紹介文」を削除しておく必要はありますか？　　基本的な知識が乏しいのでよろしくお願いします。

ヘルプの必要なページ: [リンクを見るにはログイン]

15件の返信を表示中 - 16 - 30件目 (全31件中)

← 1 2 3 →

Aki Hamano
(@wildworks)

7ヶ月、 3週前

「お知らせ」で表示される文の行数を5行くらいに限定し

段落ブロックを使って手動で更新するので、表示数は自由に変更できるはずです。新着情報ページから全ての段落をコピー＆ペーストするのではなく、必要な行数だけコピー＆ペーストすればよいと思います。

古いものは格納されていて「お知らせ一覧」ボタンで表示させる

ボタンブロックを使って、リンクに新着情報ページを指定すればよいと思います。
Toshihiko Tsushima
(@uonumajs)

7ヶ月、 3週前
新着情報のページは現状のように段落だけが含まれる、という前提で、先頭の5件だけをトップページに自動表示する手順を説明します。
1. トップページの編集画面を開いて、新着情報を表示したい位置に 固定ページ本文 ブロックを置き、表示したいページとして現在の新着情報のページを指定する。
2. 固定ページ本文ブロックの追加 CSS クラスに top-news と入力する。
3. 以下の CSS を書く。
```
.top-news p:nth-child(n+6) {
    display: none;
}
```
段落以外のブロック（例えば画像）が含まれる場合、期待した結果にはなりません。
トピック投稿者 3mcdt
(@3mcdt)

7ヶ月、 3週前

Tsushima様　ありがとうございます。

「段落以外のブロック（例えば画像）が含まれる場合」というのは、現状のトップページの一番下にあるリンク用アイコンの入っているブロックも含まれるのでしょうか。だとするとこれを削除してどこか別の所に移す必要がありますね。

Toshihiko Tsushima
(@uonumajs)

7ヶ月、 3週前

「段落以外のブロック（例えば画像）が含まれる場合」というのは、新着情報ページについてのことです。

現在のトップページがどういう状態なのかは関係ありません。

現在の新着情報ページは段落だけが使われているので、「段落以外のブロック（例えば画像）が含まれる場合」に該当しません。

とりあえず私が提示した手順通りに試してみてください。たぶん、期待通りの結果になると思います。

トピック投稿者 3mcdt
(@3mcdt)

7ヶ月、 3週前

了解しました。

「固定ページ本文 ブロックを置き」というのは、トップページにカラムで適切なサイズのブロックを置くという事でしょうか。

「表示したいページとして現在の新着情報のページを指定する」の指定とは、どの様にするのでしょうか。基本が分かってなくてすみません。

「本文ブロックの追加 CSS クラスに top-news と入力する」とは、ページの下にあるVK All in one Expansion Unit のカスタムCSSのことでしょうか。　CSSといえばこれしかやったことがありません。　

Toshihiko Tsushima
(@uonumajs)

7ヶ月、 3週前

手順 1. の 固定ページ本文 ブロックについては、
https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/vk-blocks-blocks/page-content/
をご覧ください。

手順 2. の 追加 CSS クラス については、
https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/
の「3.1.1. HTMLのタグにCSSのクラス名を追加する」のあたりをご覧ください。
今回のような、ちょっとカスタマイズしたり、デザインをいじったり…をこれから自分でやりたいというご希望があるなら、このページを熟読することをおすすめします。難解な箇所も部分もありますが、理解できる部分から身に付けていくといいです。

手順 3. の CSS を書く場所は、
トップページの編集画面の下にある VK All in one Expansion Unit のカスタム CSS です。

トピック投稿者 3mcdt
(@3mcdt)

7ヶ月、 3週前

Tsushima様

詳しい説明をありがとうございます。

その通りにやってみました。　top-news　と　.top-news p:nth-child(n+6) { display: none;}　は、各々追加CSSクラスとカスタムCSSにコピペしました。すると、新着情報ページ全体（12件）が、現在仮で編集しているトップページに表示されます。コードの中で「5件」を指定しているのは（ｎ+６）なのかと思いますが、これが機能していないのは何故なのでしょう。

Toshihiko Tsushima
(@uonumajs)

7ヶ月、 3週前

手順 1. はうまくいっていて、手順 2. 3. が違っているようですね。

これが機能していないのは何故なのでしょう。

仮で編集しているトップページを見れば原因がわかるかもしれません。
そのページの URL を提示していただくことはできますか？

トピック投稿者 3mcdt
(@3mcdt)

7ヶ月、 3週前

URLは以下の通りです。　よろしくお願いいたします。

三菱カーデザインの軌跡TEST | 三菱カーデザインの軌跡

トピック投稿者 3mcdt
(@3mcdt)

7ヶ月、 3週前

先ほどのがリンクだったのでURLで送ります。

https://mit-cardesign-t.com/?page_id=10792&preview=true

Toshihiko Tsushima
(@uonumajs)

7ヶ月、 3週前

提示していただいた URL にアクセスすると、「投稿はありません。」と表示されます。
そのページを公開した上で、公開した URL を提示してください。

トピック投稿者 3mcdt
(@3mcdt)

7ヶ月、 3週前

少々まごつきましたが、以下で良いのかと思います。

https://mit-cardesign-t.com/%e4%b8%89%e8%8f%b1%e3%82%ab%e3%83%bc%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e8%bb%8c%e8%b7%a1test/

Toshihiko Tsushima
(@uonumajs)

7ヶ月、 3週前

手順 1. 2. はうまくいってます。

手順 3. が間違っているようですが、提示していただいたページには CSS が出力されていませんので、どこが間違っているかまではわかりません。

手順 3. の CSS を、[カスタマイズ] → [追加 CSS] の方に追加してみればうまくいくかもしれません。

それでもまだうまくいかないようであれば、手順 3. の CSS を追加した画面のスクリーンショットを提示してください。

トピック投稿者 3mcdt
(@3mcdt)

7ヶ月、 3週前

仮のトップページをもう一度チェックしたところ、カスタムCSSが書いて無く、これは書いた後に保存してなかったせいかと思います。カスタムCSSにコードを書きこみ保存したところ、正常に5件表示になりました。こちらのミスでした。

ところで、トップページでは背景を黒にして、フォントは明るいベージュにしているのですが、これはトップページ側で設定できるのでしょうか。もし設定できないとなると、新着情報側をトップページの設定にするしかないのでしょうか？
Toshihiko Tsushima
(@uonumajs)

7ヶ月、 3週前
新着情報側をトップページの設定にするしかないのでしょうか？

そこまでする必要はありません。クラス top-news についてスタイル（文字色）を設定するだけでいいです。

昨日私が書いた https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/ を読んで、まず自分でトライしてみてください。その上で、具体的にわからないところがあれば新しいトピックで質問してください。
- この返信は7ヶ月、 3週前にToshihiko Tsushimaが編集しました。