WordPressテーマ「ストーク」でCTAの位置を記事下に移動する方法

こんにちは。ジロウです。

当ブログで使用しているWordPressテーマ「ストーク」には、CTA（コール・トゥ・アクション）を設置する機能があります。

でも、デフォルトではSNSブックマークボタンの下に表示されるため、

「もうちょっと上の方に移動できないかなぁ～？」

と考えておりました。

いや、ほんのわずかな違いではありますが、少しでも読者の方々の目にとまりやすい位置にしたいと思いまして・・・。

そこで、これまでは応急処置として、「single.php」に直接書き込むことで対処していたんです。

しかし、デフォルトで装備されているエフェクト効果（CTAがフェイドイン表示されるもの）が得られず、なんとなく物足りないというか、惜しい気がしておりました。

そこで、思い切って開発元のオープンケージ様にお問い合わせしたところ、丁寧な回答を頂戴しましたので、ここでご紹介しておきたいと思います。

「ストーク」のCTAの位置を少し上に移動する方法

このブログの記事下には、メルマガにご登録いただくための広告が表示されています。

これがいわゆるCTAであります。

ただ、WordPressテーマ「ストーク」に装備されているデフォルトの状態では、表示される位置がちょっと下すぎるんですね。

このままでは、画面をスクロールしないと読者の目にとまらず、あまり効果も期待できないのではないか・・・？

ということで、もうちょっとだけ上に移動したいと考えました。

それが、下図のようなイメージです。

「たいして変わらないじゃん！」

って言われそうですが、実際に画面で見てみると大違いです。

とくにスマホで確認してみると、表示されるまでに必要なスクロールの量（距離）はまったく異なります。

方法は難しくありませんでした。

「single.php」を修正するだけでカスタマイズは完了します。

では、その手順を説明していきますね。

① まず、子テーマを使用している場合は、親テーマに切り替えます。

WordPress管理画面（ダッシュボード）で、サイドバーメニューの［外観］から［テーマ］をクリック。

「ストーク」の親テーマを選択して［有効化］をクリックするだけです。

② ふたたびWordPress管理画面で、サイドバーメニューの［外観］から［テーマの編集］をクリックします。

画面右側の「テーマファイル」欄を下の方へスクロールして、「個別投稿（single.php）」を見つけてクリックします。

画面が「stork: 個別投稿 (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; ?>

この部分をクリック＆ドラッグで指定して、キーボードの［Ctrl］＋［X］で切り取り、80行目～86行目あたりにある、

</section>

の下に移動します。

④ 画面左下の［ファイルを更新］をクリックします。

ふたたび［外観］⇒［テーマ］から、子テーマを有効化しましょう。

カスタマイズは以上で完了です。

あとはWordPress管理画面メニューから、［外観］⇒［ウィジェット］と進み、「共通：CTA設定」に表示したい画像や文章を仕込むだけです。

ちょっとした違いかもしれないけれど、少しでもクリック率が上がる可能性があるのなら、修正しない手はない、と思います。

ただし、「function.php」なんかをイジるのと違って、そうそう不具合は起きにくいはずですが、くれぐれも自己責任にてお試しくださいね♪

とにかくまずは現状のバックアップから、です。