会員サイトをリニューアルしました! 新サイトはこちら

ピックアップバナーの表示位置について < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

ピックアップバナーの表示位置について
 
通知
すべてクリア

ピックアップバナーの表示位置について

5 投稿
3 ユーザー
1 Likes
2,060 表示
yoko366
(@yoko366)
New Member
Topic starter
 

お世話になります。ピックアップバナーについて教えてください。
トップページのメインビジュアル画像と、ピックアップバナーの間に、文章+画像を入れたいのですが、方法はありますでしょうか?
(ピックアップバナーの表示位置を自由に指定できると嬉しいのですが。。。)

 
投稿済 : 11/02/2021 12:57 am
かんた
(@swell-mania)
Reputable Member
 

header.phpの独自カスタマイズで対応できますね。

最新バージョンの2.3.2であれば59行目~60行目の間がメインビジュアルとピックアップバナーの間のスペースです。

そこにテキストや画像を表示するHTMLコードを書くのが私なら簡単に感じる方法です。

↓サンプル
https://webrent.xsrv.jp/demo/swell01/

※トップページだけに表示したい場合は、条件分岐しましょう。

SWELLマニアというサイトを運営しています!

 
投稿済 : 11/02/2021 11:26 am
しらこ
(@96ssbike)
Prominent Member
 

ご質問につきまして、フォーラムへ転記していただきありがとうございます!
お手数をおかけしました。

通常ではメインビジュアルとピックアップバナーの間には何かを差し込むことができない仕様となっているようです。

それを代替的に解決する方法として、以下の手順を紹介します。

①HTML編集などの知識がない初心者の方向け→見た目はピックアップバナーと異なってしまいますが、ピックアップバナーを使用せず、トップページを固定ページ指定した上で、ブロックエディターで「カラムブロック」内に「バナーリンクブロック」などを設置して、画像をボタンに見立てるやり方です。

必要な前提知識:SWELLでのブロックエディターを扱う知識

カラムブロックは、最大6カラム作成できるので、4つボタンでしたら比較的簡単に作れます。
そのためには、まずこちらのページで回答したような、トップページを固定ページ指定して、いわゆる「サイト型」に変更する必要が出てきます。大幅な変更が必要になってしまいますね。
https://u.swell-theme.com/community/swell-forum/demo%E3%82%B5%E3%82%A4%E3%83%88%EF%BC%95%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%81%9F%E3%81%84/

すごく雑ですが、試しに作ったのが以下の画像です(もうちょっと手間暇かければ、マシに作れるかもです)。
※つまり、メインビジュアル以下を固定ページにしてしまうやり方です。

※サイト型にするには、私よりもくうかさんのサイトとかが参考になるかもです。。
https://www.kurasitotonoe.com/entry/swell-toppage/

②固定ページをトップページにする方法ではなく、「子テーマ」で編集する方法です。少し高度ですが、子テーマの概念が理解できれば出来ます。

必要な知識:子テーマの知識、HTMLの知識

外観>テーマエディターを使用する場合、子テーマが必要になります。
今回のピックアップバナーの部分は、/wp-content/themes/swell/parts/top/pickup_banner.php というファイルが該当します。
このファイルを、 /wp-content/themes/swell_child/parts/ 内にpickup_banner.phpのファイルをコピーする必要があり、
pickup_banner.php内の、11行目と12行目の間に、画像+文字のHTMLを挿入するなどして編集します。

※基本的には、このテンプレート(pickup_banner.php)はあまり更新されるような場所ではないので、SWELLのアップデートの影響が受けにくいと判断して、子テーマの紹介をしていますが、親テーマ側でこのテンプレート(pickup_banner.php)への内容変更があった場合だけ、子テーマ側でも変更対応する必要が出ます。

This post was modified 4年前 by しらこ

にゃーん .

 
投稿済 : 11/02/2021 1:48 pm
yoko366
(@yoko366)
New Member
Topic starter
 

ご回答ありがとうございました。

なるほど!①のやり方を試してみようと思います!!

 
投稿済 : 12/02/2021 2:16 am
しらこ reacted
しらこ
(@96ssbike)
Prominent Member
 

手順を色々と踏んでいく地道なやり方ですが、「SWELLで構築したサイトのサイト型化」にもなって面白いと思うので、ぜひやってみていただければと思います…!

もし、今後既存のブロックのデザインを色々いじりたいということでしたら、CSSで調整していくと、ボタンのデザインを自分の好みに変えれたりします。ページごとにCSSを入れられたりしますし(各ページの下にCSSを入れられる部分がある)、サイト全体に対してCSSを入れられたりします(カスタマイズ>追加CSS)。

テーマにない機能は、こうした技を少しずつでも良いので磨いていくと、本当に自分の好みである程度やりたいことは出来ると思いますので、良かったらチャレンジしてみてください。

にゃーん .

 
投稿済 : 12/02/2021 7:20 am
共有: