WordPressテーマSANGOの質問

ボタンのリンクを別ウィンドウで開く設定はあるのでしょうか?

アバター
ぷぅこ

こんにちは。質問させていただきます。

ヘッダーアイキャッチの設定でボタンを表示させているのですが、リンク先を外部のサイトに設定しているので別ウィンドウ(別タブ)で開きたいのですが、可能でしょうか?
また、同じように「ヘッダーお知らせ欄」のリンク先も別ウィンドウで開きたいのですが、可能でしょうか?

よろしくお願いいたします。

ヘッダーアイキャッチを設定する
ヘッダーアイキャッチ画像を設定しよう
コメントへの回答
サルワカくん
サルワカくん
2019/02/19

テーマファイルの編集により可能ですが、別タブで開くtarget="_blank"自体あまりおすすめしません。
この記事に書かれているように、たとえばTwitterアプリで開いたブラウザ上ではtarget="_blank"は効かず、ボタンが全く反応しないものになってしまいます。
ソーシャル流入が期待される場合、そのような重要なリンクに対してtarget="_blank"を指定するのはデメリットの方が大きいと思うのですが、それでも別タブで開きたい事情があるという感じでしょうか。

アバター
ぷぅこ
2019/02/20

お返事ありがとうございます。

別ウィンドウで開きたい理由ですが、現在サロンのホームページを持っております。自社のホームページ内には予約ページを作っておらず、「予約する」ボタンから予約システム会社にリンクを飛ばせて、ネット予約を受け付けている状況です。
ヘッダーアイキャッチは目に付きやすいので、「予約する」ボタンを設置し、予約システム会社に飛ばせたらと思ったのですが・・・
今までお客様に”ボタンが反応しなかった”という話を聞いたことがなかったので、別ウィンドウで開くデメリットを知りませんでした・・・勉強になりました。
とはいえ、「予約する」ボタン以外で予約システム会社への誘導は難しいので、ご教授いただければ幸いです。
よろしくお願いいたします。

サルワカくん
サルワカくん
2019/02/20

事情があるのですね。
以下のようなカスタマイズにより別タブで開くように変えることができます。

①ヘッダーお知らせ欄
1-1. 子テーマにheader.phpを複製する(親テーマからコピー、子テーマにすでに存在する場合はそちらを編集)
1-2. 65行目の

echo '<div class="header-info"><a href="'.get_option('header_info_url').'" rel="nofollow">'.get_option('header_info_text').'</a></div>';

echo '<div class="header-info"><a href="'.get_option('header_info_url').'" target="_blank" rel="nofollow">'.get_option('header_info_text').'</a></div>';

に置き換え

②ヘッダーアイキャッチ画像
子テーマのparts/home/featured-header.phpを編集します。すでに子テーマに存在する場合はそちらを編集してください。
2-1. 子テーマ内に「parts」という名前のフォルダーを作成
2-2. 「parts」フォルダー内に「home」という名前のフォルダーを作成
2-3. 「home」フォルダー内に「featured-header.php」という名前のファイルを親テーマファイルから複製
2-4. 22行目の

<p class="header-image__btn"><a class="raised rippler rippler-default" href="<?php echo esc_url(get_option('header_btn_url')); ?>" style="background: <?php echo get_theme_mod( 'header_btn_color', '#ff90a1'); ?>;"><?php echo get_option('header_btn_txt'); ?></a></p>

<p class="header-image__btn"><a class="raised rippler rippler-default" href="<?php echo esc_url(get_option('header_btn_url')); ?>" style="background: <?php echo get_theme_mod( 'header_btn_color', '#ff90a1'); ?>;" target="_blank"><?php echo get_option('header_btn_txt'); ?></a></p>

に置き換え
2-5. 42行目の

<p class="divheader__btn"><a class="raised rippler rippler-default" href="<?php echo esc_url(get_option('divheader_btn_url')); ?>" style="background: <?php echo get_theme_mod( 'divide_btn_color', '#6BB6FF'); ?>;"><?php echo get_option('divheader_btn_txt'); ?></a></p>

<p class="divheader__btn"><a class="raised rippler rippler-default" href="<?php echo esc_url(get_option('divheader_btn_url')); ?>" style="background: <?php echo get_theme_mod( 'divide_btn_color', '#6BB6FF'); ?>;" target="_blank"><?php echo get_option('divheader_btn_txt'); ?></a></p>

に置き換え

(ファイルの複製にはFTPソフトを使うのが良いと思います。使い方
もしTwitterから見たときに「ボタンが反応しない」という声があれば元に戻していただければと思います。

アバター
ぷぅこ
2019/02/20

丁寧な解説ありがとうございます。
とてもわかりやすくて迷わず作業できそうです。
現在、ローカル環境でSANGOのカスタマイズを行っておりますので、本番環境に移行する際に、ご教授いただいたようにカスタマイズしてみたいと思います。
ありがとうございました。

サルワカくん
サルワカくん
2019/02/20

ご返信ありがとうございます。
よろしくお願いいたします。