こちらのHPを立ち上げることになった経緯はいつか
まとめたいと思っていたのですが、
作っているうちにどんどん初期の記憶が薄れてしまいそうなので
取り急ぎ、都度都度問題解決したものから記事を
書いていく事にしました。
なので順番前後ですが、かねてより悩んでいて
本日ようやく体裁を整えつつある本題について備忘録です。
使用しているのは、wordpress の cocoon、
ミッションは大きく2つあります
今回の対象は・・・「SHOP」ページです
「種類別の記事サムネイルをメニューみたいに
トップページに並べたい」
SHOPのページなので、新着アイテムを
「ブラウス」「ボトムス」「ワンピース」「カットソー」
とそれぞれの子カテゴリー別に分けてSHOPトップで見せたいという希望
試行錯誤の結果のみを下記にまとめます
①「外観」→「メニュー」でメニューを作る
→これは下準備なので、実際のページ作成の前に行います
今回だと「blouse,shirt」というメニュータイトルで
その中にブラウスのブログ記事を登録する
同様に「bottoms」というメニュータイトルに
ボトムスのブログ記事を登録する
という作業を各カテゴリー分作成する
②ページ作成、ショートコードを挿入
→「ブロック」で「ショートコード」を選んでその中に
と入力、×××には①で作成したメニュー名を入れる（例：blouse,shirt）
そうすると、①メニューで作成した記事リストで
並べることができました
以下、並べたいだけどんどんブロックを作る
あと、カスタマイズで、サムネイルの表示サイズを
変えたのですが、その辺は「type=default」のdefaultを
別の合言葉に変えることで叶います
作成時に参考にさせていただいたサイト様
https://gungii.com/navi-info/
2カラムでメニューを表示、モバイルでも2カラム維持したい
現在でいうと6種を縦に並べるとかっこ悪いので
2列で表示したいと思って実際はブロックで
「2カラム」を選択してから、上記のショートコード入力を
おこないました（メニュータイトルも2カラム「段落」で）
そうするとぱっと見いい感じに2列で並んだなーと
思っていたのですが、スマホで見るとなんと1列に・・・
こちら、地味になかなか解決しなかったのですが・・・
私の場合は下記で解決しました
①作成ページの「カスタムCSS」にコードを入力
作成ページの下部にある「カスタムCSS」に
.wp-block-columns {
flex-wrap: nowrap;
}
と、入力以上。
作成時に参考にさせていただいたサイト様
https://sanapisaurus.com/cocoon_2column/
以上でとりあえず現在のページになっております
メニューを作るという作業は、初期のころヘッダーの
メニュー作成時に使っていたようですがすっかり忘れて
いました
モバイルだと・・・というのはPCで作っていると盲点で
一旦完成！とぬか喜びしました
あと、カスタムCSSのコードをいろんなサイトを参考に
いろいろ試したのですがなかなかうまくいかず、
私の場合は上記のコードで最終できた、という感じです
これからも、ページを作成しながら参考にしたサイトなどを
忘れないようにupしていきたいと思います
