[対馬 俊彦]

ロリポップのFTP では、権限がないということで触れませんでした。

ロリポップで WordPress を簡単インストールすると、wp-config.php を変更できない設定になっています。

wp-config.php を変更できるようにするには、[オーナー] の [書込] にチェックをつけていったん保存します。
添付画像をご参照ください。

wp-config.php の最後の方に
define(‘WP_DEBUG’, false);
という行がありますので、false を true に書き換えればデバッグモードになります。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

カードブロックというのは、外観→ウィジェットに出てくる、VKPRBlocksの事でしょうか？

そうではありません。

どこに出てくるものか詳細教えていただきたく。

編集画面で [ブロックの追加] ボタンをクリックすると出てくるブロックのひとつです。
添付画像をご参照ください。

このブロックはプラグイン VK Blocks Pro をインストールしないと使えません。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

参考情報だけですみません。

WordPress 5.6.1
Lightning Pro バージョン: 8.6.0
Lightning Skin Pale バージョン 8.0.0

同じ環境のサイトを運用していますが、ご指摘の現象が起きていません。

差し支えなければ現象が起きているサイトのURLを提示していただいた方が
いい回答を得られる可能性が上がるかもしれません。

[対馬 俊彦]

グリッドカラムは、こういう使い方であっているのか？

あっていると思います。私もグリッドカラムをこのように使っています。

画面幅ごとにカラム数を指定できるので便利ですよね。とてもありがたいブロックです。

コアに入っているブロックで、同じようなことができるものがあるのか？

画像を並べることに限定すれば、WordPress のギャラリーブロックを使うこともあります。

添付画像をご覧ください。

3カラムで5枚の画像を表示すると、3で割り切れない部分が大きく表示されますが、
以下の CSS で大きさを揃えています。

.wp-block-gallery .blocks-gallery-item { flex-grow:0; }

割り切れない部分が大きく表示されることを利用して、
以下の CSS で大きい画像を最初に配置して見せたりもします。
新着作品の画像一覧で、あとから(最後に)追加したものが先頭に大きく表示されるという使い方です。

.blocks-gallery-grid { flex-flow: row wrap-reverse; }

• この返信は3年、 9ヶ月前に対馬 俊彦が編集しました。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

固定ページに同じ検索ボックスを配置すれば意図したレイアウトは可能

なるほど、そうですね。
いろいろと使い道がありそうなので、どのように使えるか考えてみるのも楽しいです。

[対馬 俊彦]

石川 様、

いつも勉強させていただき、ありがとうございます。

上記の手順通りにやってみたところ、ループ部分を非表示にできましたが、
VK Filter Search の検索結果も出力されなくなってしまいました。
もしかしたら、私のやり方が悪いのかもしれませんが…。

[対馬 俊彦]

よく読んだら、

ループを非表示にする事が出来たら解決

ということなんですね。それであれば…

「VK固定ページ本文」で表示させたものだけ残して、
アーカイブページのループを非表示にする方法として、
追加 CSS に以下の行を入力するやり方があります。

.post-type-archive-***** .vk_posts-postType-***** {
display:none;
}

***** は投稿タイプIDです。

とりあえずこれで該当カスタム投稿タイプのアーカイブページでループが非表示になります。

ただし、これをやると VK Filter Search プラグインの検索結果も非表示になります。
このプラグインをお使いでなければ問題ないですが。

[対馬 俊彦]

この状態で「イベント」をクリックした際に表示される一覧ページを、カテゴリ分けして一覧にしたいと考えています。

となると、親テーマの .php ファイルを子テーマにコピーしてカスタマイズする必要がありそうです。

そうなると私には荷が重いので、すみませんが他の方の回答をお待ちください。

[対馬 俊彦]

アーカイブページのカスタマイズは大変そうなので、
VK Blocks Pro の投稿リストを使って手間をかけずに作る方法を書きます。

任意の固定ページに以下の2つの投稿リストを配置すればご希望のものができると思います。

【投稿リスト-1】
投稿タイプ：イベント
分類:コンサート

【投稿リスト-2】
投稿タイプ：イベント
分類:グルメ

投稿リストはページ送りがないので、イベントの数が多くなるとすべてを表示できなくなりますが、
アーカイブページへのリンクをそれぞれの下に置けばよいです。

[対馬 俊彦]

もう一つデータを増やして６個にした場合、
３つ×２段のCSSも教えていただくことは可能でしょうか？

メディアクエリを使って、WordPress ギャラリーの CSS を置き換える記述を追加する必要があり、手間がかかります。

6個であれば、VK Blocks Pro のグリッドカラムを使うとよいです。
CSS を書かなくても、画面サイズごとに 1,2,3,4,6 の中から列数を選ぶことができます。
添付画像をご覧ください。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

横からすみません。

ココチーノデータの数値を強調するために、以下のスタイルを追加して、
2列のままで大きく見せるやり方も選択肢になるかと思います。

.wp-block-gallery.columns-5 .blocks-gallery-item {
    flex-grow: 0;
}

添付画像のようになります。

ご参考まで。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

JavaScript でやってみました。以下のようにすると実現できます。

※バナー画像にクラス menu-btn を割り当てる。

※WordPress によりグローバルメニューの [設定ガイド] に割り当てられた ID が menu-item-*** になっている。

*** は実際のサイトで確認してください。

【JavaScript】

$(".menu-btn").hover(function(){
  $("li#menu-item-***").addClass("sub-menu-open");
}, function(){
  $("li#menu-item-***").removeClass("sub-menu-open");
});

【CSS】

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
opacity: 1;
max-height: 1000px;
}

.device-pc .gMenu>li.sub-menu-open::after {
opacity: 1;
bottom: 0;
}

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
transition: all 1.0s;
}

バナー画像にマウスを合わせた後、サブメニューの項目をクリックしやすいように、transition の数値を 1.0s に増やしてあります。

【このやり方で作ったページ】

本文のバナーをクリックしたらサブメニューを開く

実用になるかどうか微妙なところです。

[対馬 俊彦]

すみません、昨日 11:05 AM のコメントを訂正(撤回)します。

参考ページ：https://techacademy.jp/magazine/19418

このやり方は2つの要素が隣接する場合しか役に立たないので、
今回のHANAさんの質問の回答としては不適切でした。

[対馬 俊彦]

サブメニューが表示されるけどクリックしようとするとメニューが消えちゃう

けっこう大きい問題ですね。
これは私が最初にコメントした CSS を使うやり方ではクリアできません。

[対馬 俊彦]

HANAさん、

ひとつ気になったので、コメントさせていただきます。

スマホでの閲覧は想定しなくてよいのでしょうか？

スマホではマウスオンの検出はできませんし、
タップを検出してもサブメニューを開くことには無理があります。

パソコン限定のサイトであればアリかもしれませんが・・・。

デザインを要望した方にこのことを伝えれば、理解を得られるかもしれません。

[投稿者]

投稿