VOLLカスタマイズについて
フォーラム › テンプレート(テーマ) › VOLLカスタマイズについて
タグ: VOLL
-
投稿者投稿
-
2021年1月23日 9:01 PM #92183
質問させてください。
VOLLのデモサイトのカテゴリーを魅力に感じて購入しカスタマイズを進めています。
どうしてもわからない点があるので質問させて下さい。
VOllのヘッダー画像下の商品一覧上ヴィジットにwelacartカテゴリーを設置しています。そうすることでデモサイトのようにヘッダー下に正四角形のカテゴリーバナーが横並びで2つ表示されています。(現在カテゴリーは2つのみです)
同じように商品が登録されていないカテゴリーもバナーで表示させることは可能でしょうか?具体的には「ショップの思い」「素材について」といった記事にバナーをクリックすると飛ぶようにしたいのですが。
お力を貸して頂けると助かります。
よろしくお願いします。2021年1月24日 11:57 AM #92184mai参加者nanakofan1122 様
はじめまして
素人の私が、お役に立てるかどうか解りませんが
ご質問の内容はトップページのことなのでしょうか?
だとすればfront-page.phpを変更をされている?デモ画像では
たぶん、ソファー、チェアー、ベッド、テーブルの4カテゴリーが
2✕2で表示されている所のことではないでしょうか?
この4点が初期設定で登録するようなシステムかどうかは解りませんが
front-page.phpを見ると、どこかに登録してあるものを読み込み
foreachによりループさせているようです。
get_category_link( $**** );とあるので、どうもカテゴリーの
urlを取得している様です。
おっしゃる様にウイジェットあたりで登録したものを表示しているのか??
「ショップの思い」は固定ページなので登録できるかどうか?そこで、邪道かもしれませんが
front-page.phpのコードの
endforeach;の後に下記の様なコードを追加すれば可能かも?デモ画面の該当部分のソファーの部分は下記の様になっています。
<!– .cat-box –>
上記のurl
https://themes.welcart.info/basic-voll/?cat=39
この?cat=39の39がソファーのカテゴリーidになっています。しかし、上述のように「ショップの思い」はカテゴリーではなく固定ページになると思います。
そのため、この部分のurlを「ショップの思い」のurlに変更して
画像は固定ページのアイキャッチ画像か別のホルダーに収納したものを
利用すればできそうに思います。追加するコード
<!– .cat-box –>
素材についても同様に
略<!– .cat-box –>
追加するコードここまで上記のコードをfront-page.phpの117-122行目あたりにある
<?php
endforeach;
?>
ここに上記のコードを挿入
<!– .cat-slider –>この場合は、デモページの例では
ソファー、チェアー、ベッド、テーブルの下に
ショップの思いと素材についての項目が
表示されると思います。横に4コマ並べたければ
.category-area .cat_box {
position: relative;
width: 50%;/* ここを画面の大きさにより25%にする */
float: left;
overflow: hidden;
}試していないので表示する保証はありません。
- この返信は3年、 8ヶ月前にmaiが編集しました。
2021年1月24日 12:09 PM #92186mai参加者nanakofan1122 様
タグコードが編集できず実行されてしましました。
ごめんなさい。2021年1月24日 5:55 PM #92187mai参加者htmlのタグの部分を再度投稿します。
デモ画面の該当部分のソファーの部分この様になっています。
<!– .cat-box –>
上記のurl
https://themes.welcart.info/basic-voll/?cat=39
この?cat=39の39がソファーのカテゴリーidになっています。しかし、上述のように「ショップの思い」はカテゴリーではなく固定ページになると思います。
そのため、この部分のurlを「ショップの思い」のurlに変更して
画像は固定ページのアイキャッチ画像か別のホルダーに収納したものを
利用すればできそうに思います。追加するコード
<!– .cat-box –>
素材についても同様に
略<!– .cat-box –>
追加するコードここまで上記のコードをfront-page.phpの117-122行目あたりにある
<?php
endforeach;
?>
ここに上記のコードを挿入
<!– .cat-slider –> -
投稿者投稿
- このトピックに返信するにはログインが必要です。