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>などといったタグは自動生成されません。
したがって、本ショートコード使用上は、必ず同じ行に何か他の要素（テキストなど）と一緒に使用してください（通常、このショートコード単独で使うことはほとんどないと思いますが…！）。
