WordPressでUniversal Analytics

今更だけど、WordpressにUniversal Analyticsのトラッキングコードを貼る方法。
Wordpress用のAnalyticsタグ追加用のプラグインとかもあるけど、一番オーソドックスな方法がこちら。

functions.phpに以下を追加する。

<?php
function wp_google_analytics(){ ?>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-xxxxxxxx-x’, ‘auto’);<!–トラッキングID UA-xxxxxxxx-xは書き換える–>
ga(‘send’, ‘pageview’);
</script>
<?php }
add_action(‘wp_head’, ‘wp_google_analytics’);

ここからfunctions.phpの一般的な話。
javascriptをfunctions.php内に貼る時は、<script></script>の範囲外にすることに注意。
上の例だと、

<?php
function hoge(){
?><!–ここまでPHP–>

<script>
<!–ここはjavascript–>
</script>

<?php }<!–ここからまたPHP–>
add_action(‘wp_head’ , ‘hoge’);

こんな感じ。

functions.phpの上のほうに「<?php」がある場合は「<?php」をつけないでOK。
また、functions.phpの一番下は「?>」で閉じない。


WordPressにfaviconとtouch iconを追加するプラグン、Favicon Rotator

faviconとtouch iconって
<link rel=”shortcut icon” href=””>
<link rel=”apple-touch-icon” href=””>
とかで追加するわけですが、サイズ作ったりpngにしたり、いろいろ面倒。

WordPressのプラグイン、Favicon Rotatorを使うと、結構簡単にFaviconとtouch iconが追加できます。

Favicon Rotatorをインストールすると、「外観」メニューに「favicon」がでてくる。
名称未設定-1

favicon設定画面で、画像をドラッグ&ドロップして、「変更を保存」するだけ。
スクリーンショット 2015-10-20 11.02.03


WordPressにSitecatalystタグを自動的に入れる

Sitecatalystタグは、ページ毎にs.pageNameを変えないといけないので面倒くさい。
footer.phpに、こんな感じにすれば、自動的にcatalystタグが入る。

<?php wp_footer(); ?>
<!– SiteCatalyst code version: H.9. –>
<script language=”JavaScript” src=”/js/s_code.js”></script>
<script language=”JavaScript”>
s.cookieLifetime=”Session”
<!–
s.pageName=”<?php
if (is_front_page()){//フロントページのs.pageNameは「hoge:Index」にする
echo(‘hoge:Index’);
}else if (is_single()){//投稿ページのs.pageNameは「hoge:ページ名」にする
$site_name = site_url();
$site_url = get_permalink();
$tag_url = str_replace($site_name, ”, $site_url);
$tag_url = str_replace(‘/’, ”, $tag_url);
$tag_url = ‘hoge:’.$tag_url;
echo $tag_url;
}else if (is_archive()){//カテゴリ一覧ページのs.pageNameは「hoge:category_カテゴリ名(スラッグ)」にする
$category = get_the_category();
$tag_url =’hoge:category_’.$category[0]->category_nicename;
echo $tag_url;
}
?>”
s.server=””
(中略)
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code)//–></script>
<!–/DO NOT REMOVE/–>
<!– End SiteCatalyst code version: H.9. –>

</body>
</html>



Contact Form 7のメール送信完了をわかりやすく

WordPress定番の、お問い合わせフォーム作成プラグイン、Contact Form 7。

このContact Form 7のメール送信完了がわかりにくい、という話がありました。
確かに、メールフォーム画面からどこにも遷移せず、送信ボタンの上に「あなたのメッセージは送信されました。ありがとうございました。」が表示されるだけ。
送信されたのかどうか、わかりにくいかもしれません。
スクリーンショット 2015-09-28 10.35.14

Contact Form 7は、「その他の設定」でメール送信完了後のアクションが指定できます。
設定方法は、「その他の設定」に
on_sent_ok: “alert(‘あなたのメッセージは送信されました。ありがとうございました。’);”
のようなメッセージを書くと、メール送信完了後にダイアログが表示されるようになります。
スクリーンショット 2015-09-28 10.33.18

実際の送信完了画面はこんな感じ。
スクリーンショット 2015-09-28 10.36.01

on_sent_ok: “window.location.href =’url’;”
のように記述すれば、別に作ったメール送信完了ページへ飛ばすこともできます。


WordPressでbxSliderを使う

bxSliderはjQueryベースのレスポンシブ対応コンテンツスライダー。

書き方はbxSliderサイトの通りなので、Wordpressで使う時の注意点。

jsとcssをWordpressで使えるようにする

bxSliderサイトからダウンロードしたjquery.bxslider.min.js、jquery.bxslider.cssを、Wordpressの子テーマに配置。
functions.phpで読み込み設定。

function bxslider_js() {
wp_enqueue_script( ‘jquery.bxslider.min.js’, get_bloginfo( ‘stylesheet_directory’) . ‘/js/jquery.bxslider.min.js’, array(), false, true );
}
add_action( ‘wp_enqueue_scripts’, ‘bxslider_js’);
function bxslider_css() {
wp_enqueue_style( ‘bxslidercss’, get_bloginfo( ‘stylesheet_directory’) . ‘/css/jquery.bxslider.css’, array(), null, ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘bxslider_css’);

この例では、jsを
/wp-content/themes/子テーマディレクトリ/js/jquery.bxslider.min.js
cssは
/wp-content/themes/子テーマディレクトリ/css/jquery.bxslider.css
に配置している。

imagesはjquery.bxslider.cssの下に

ダウンロードしたbxSliderファイルのimagesディレクトリに「▶︎」のようなコントローラー画像、ローディング中のぐるぐる画像などが入っている。
jquery.bxslider.cssの記述が

background: url(images/bx_loader.gif) center center no-repeat #fff;

のようになっているので、cssがあるディレクトリにimagesを作る。

/wp-content/themes/子テーマディレクトリ/css/jquery.bxslider.css
/wp-content/themes/子テーマディレクトリ/css/images/bx_loader.gif
/wp-content/themes/子テーマディレクトリ/css/images/controls.png

こういう構造になっていればOK。

bxsliderを呼び出す時は$(function()では動かないので、jQuery()で呼び出す。

 <script type=”text/javascript”>
jQuery(document).ready(function($){
$(‘.bxslider’).bxSlider();
});
</script>

こんな感じ。


WordPressでフッタに年を表示する

フッタに
「Copyright © 2015 MIYASAKA CO,. LTD. All Rights Reserved」みたく書きたいときは、footer.phpで
<div class=”site-info”>
<p>Copyright &copy; <?php echo date(‘Y’); ?> MIYASAKA CO,. LTD. All Rights Reserved</p>
</div>
のように書けばOK。
これで年度末作業が一個減ります。


WordPressに「最上部に戻る」ボタンを表示するScroll to Top

Smooth Page Scroll to Topがスマフォでうまく表示できなかった。
いくつかの同様のプラグインを試してみて、やっと動くものを見つけた。
それがScroll to Top。
スクリーンショット 2015-07-30 13.37.45

スクロールボタンに表示される文字や幅、色などのカスタマイズが可能だ。


WordPressに「最上部に戻る」ボタンを表示するSmooth Page Scroll to Top

Smooth Page Scroll to TopはWordpress用のプラグイン。
画面右下に、「△」ボタンを表示し、最上部へのスムーススクロールができるようになる。
スクリーンショット 2015-07-30 8.37.02

プラグイン一発でこれができるんだからWordpressはほんと便利。
(これもmiyasaka.infoだとなぜかスマフォでうまく表示できない。なぜだ。)


WordPressにページ切り替えアニメーションを追加するPage Transition

Page TransitionはWordpress用のプラグイン。
ページ切り替え時にフェードなどの効果を追加できる。
スクリーンショット 2015-07-30 8.26.21
(miyasaka.infoでは変なキャッシュが効いて、効果がなかなか反映されなくて困ってるけど)

ベースになっているのはjQuery Animation


WordPressをソーシャルログイン対応にするプラグイン「Social Login」

このプラグイン、前に紹介したつもりなんだけど、忘れていた。
Wordpressを、Facebook, TwitterのソーシャルメディアIDログインに対応させるプラグインがoneall Social Login

設定方法はこちらのサイト参照。

一般購読者向けの設定にするには、Wordpressの一般設定で、新規ユーザーのデフォルト権限グループを購読者に変更。
Social Loginプラグインの設定で、Where should new users be redirected to after having registered with their social network account?をRedirect users to the homepage of my blogとかにしておけば良いだろう。