テーマStork（ストーク）でSNSシェアボタンとCTAの位置を入れ替える方法

こんにちは、最近チャットモンチーにハマっている荒井崇志です。聞き出してから知ったことですが、すでに解散（彼女たちは「完結」と言っている）しちゃってるんですよね。。13年間も活動をしていたのに、なぜ聴こうとしなかったのか・・・悔やまれます。

今日は、WordPressのテーマStorkで、SNSシェアボタンとCTAの位置を入れ替える方法をお伝えします。

何らかの目的があって、ブログを書いている方もおられると思います。例えば、商品や情報商材を売ったり、セミナーの集客をしたりと。投稿記事を見つけて読んでもらって、そこのページにアクセスしてもらうという流れですね。この時に役立つのがCTAボタンです。Storkは簡単にそれを設置できるんで、すごく便利なんですよ。

デフォルトの状態ですと、投稿記事→SNSシェアボタン→CTAという順番で表示されます。すっきりと表示されるし、全然問題ないと思っていたのですが、ある時ふとスマホ画面で自分の投稿記事をチェックしていたら、CTAボタンが見づらいんじゃないかと感じたんです。本来の目的からしたら、むしろ記事の下のSNSボタンが邪魔に思えてきてしまいまして・・・という経緯で、投稿記事→CTA→SNSシェアボタンの順に変更したわけなんです。

それでは実際の作業に入っていきましょう。

作業の前に・・・
(1)PHPの編集は、必ずバックアップを取ってから行ってください。
(2)親テーマ(Stork)ではなく、必ず子テーマ(Stork_custom)のPHPを編集してください。
(3)作業は自己責任で行ってください。

有効中のテーマが、子テーマになっているのを確認して作業を進めていきます。

管理画面「外観」の中の「テーマの編集（テーマエディター）」をクリックします。
右のテーマファイルから、「single.php」を探します・・・が、おそらくないと思われます。なので、親テーマにあるsingle.phpを子テーマにコピーする作業を行いましょう。※すでにテーマファイルの中に「single.php」がある場合は、この作業は不要です。

【親テーマにあるsingle.phpを子テーマにコピーする】
FileZilla（FTPソフト）を起動します。ログイン接続できたら、自分のサイトを開いて、「wp-content」→「themes」→「jstork」をクリックします。
その中で、single.phpファイルを探します。見つかったら、それを左枠の中へドラッグしてください。（FileZillaの左側は、わかりやすように「デスクトップ」にしておくと良いでしょう）

左側へドラッグできたら、再び右側で自分のサイトを開き、「wp-content」→「themes」→「jstork_custom」をクリックします。
先ほど左側にドラッグしたsingle.phpファイルを、今度は右側にドラッグします。これで、ストークの子テーマの中にsingle.phpが追加できました。

【子テーマのsingle.phpの書き換え】
もう一度、管理画面「外観」の中の「テーマの編集（テーマエディター）」をクリックします。
右のテーマファイルの中を見てみると、先ほどはなかったsingle.phpがあると思いますので、そこをクリックして修正していきます。

まず、128行目～132行目（もしくは135行目～139行目）辺りに記述されている下記コードを見つけて、それを「切り取り」します。

< ?php if ( is_active_sidebar( 'cta' ) ) : ?>
< div class="cta-wrap wow animated fadeIn" data-wow-delay="0.7s">
< ?php dynamic_sidebar( 'cta' ); ?>
< /div>
< ?php endif; ?>

次にそれを、80行目～86行目辺りにある< /section >の下に貼り付けます。作業はそれでOKです。

最後に、画面左下の「ファイルの更新」を押して完了です。実際の画面表示が変わっているか確認してみてください。

CTAボタンが記事の直下に出てくることで、ランディングページへの導線が認識しやすくなったと思います。PCの画面上はもちろんですが、スマホやタブレット端末での見え方も意識していきたいですね。
それではまた。