サイト全体設定 > お知らせバー お知らせバーにボタンを配置できます

アクションフック 'swell_before_post_head'

SWELLのテキスト本文で、PC表示の場合「クリック」スマホ表示の場合「タップ」と表示を切り替えるカスタマイズ

アクションフック 'swell_before_post_thumb'

SWELLでブログを作成する際、テキスト本文をPC表示の場合「クリック」、スマホ表示の場合「タップ」と表示を切り替えるカスタマイズ方法です。

自分でfunctions.phpを編集する場合や、Code Snippetsプラグインを使用してコードを追加する場合、コードの追加の仕方を誤ったときにWordPress自体がエラーが発生して、サイトが閲覧できなくなることがあります。そうした場合の注意点を以下の記事にまとめたので、ぜひご覧ください。

目次

サンプル

クリックタップ

実際にこのブログをPC・スマホで表示を分けて表示してみてください。

カスタマイズ方法

子テーマのfunctions.phpまたはCode Snippetsプラグインに、以下のコードを入力します。

add_shortcode( 'click_tap', function() {
return "<span class='pc_only'>クリック</span><span class='sp_only'>タップ</span>";
} );

上記のコードを入力した後は

クリックタップと表示したい部分に、ショートコード[click_tap]を入力してください。

たとえば、本文を「こちらをクリックタップしてください」としたい場合、エディター画面上は「こちらを[click_tap]してください」となります。

既存のテキストをショートコードに置き換える場合

Search Regexプラグインなどを使用して、既存のテキストをショートコードに置き換えるのが便利です。

たとえば、「クリック」という文字を検索して、置き換え後のテキストは[click_tap]とすると良いでしょう。

すでに自力で出し分け(表示分け)を行っている場合は?

すでに自力で出し分け(PC・スマホでの表示分け)を行っている場合は、特に先ほどの置き換えは行う必要はないかと思います(もしも、すでに置き換えを行ったとしても、特段の問題は出ないと思います)。今後、更新する記事でショートコードを追加していけば良いでしょう。

使用上の注意点

上記のショートコードは、ただ単に

<span class="pc_only">クリック</span><span class="sp_only">タップ</span>

というHTMLを自動生成するだけです。

同じ行に、他の何かの要素(テキストなど)がない場合、自動的に<p>~</p>などといったタグは自動生成されません。

したがって、本ショートコード使用上は、必ず同じ行に何か他の要素(テキストなど)と一緒に使用してください(通常、このショートコード単独で使うことはほとんどないと思いますが…!)。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

埼玉県在住・男性。SWELLを使い続けて2年、フォーラムで回答し続けて1年以上。この経験から得られたノウハウをみなさんに役立てたいと思い、このサイトを作りました。

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次