WordPressを活用しつつ特定のタブをクリックした際、スマホからのアクセスは別なURLに自動転送（リダイレクト）したいという話があり、 WordPressでJavaScript を扱う方法について、作業の段取りをちょっとメモ。

WordPress子テーマの作り・functions.phpの設定

まずはディレクトリを用意。
今回はわかりやすく「●●●_child」という名前のディレクトリを
「wordpress/wp-content/themes」以下に、FTPでアップロードしました。
※●●●は親テーマのディレクトリ名を入れています。

次に、そのディレクトリ内に、子テーマの
ファイル「style.css」と「functions.php」を作成します。

「style.css」の中身

/*
Template:●●●
Theme Name:●●●_child
Theme URI:http://●●●.com/
Description:●●●の子テーマです
Author:だい
Version:1.0
*/
@import url("../●●●/style.css");

「Template」　：　親テーマのディレクトリ名　※必須
「Theme Name」　：　子テーマの名前　※必須
「Theme URI」　：　子テーマのURI（ある場合は設定）
「Description:」　：　子テーマの説明
「Author」　：　子テーマの作者
「Version」　：　子テーマのバージョン

親テーマの内容を一旦読み込んでから、カスタマイズ部分のみ、記載したいので
「@import url」で親テーマの「style.css」を読み込んでいます。

WordPressの管理画面メニューから「外観」→「テーマ」を選択して、
追加されている「子テーマ」を有効化します。

「functions.php」の中身

<?php
if (!is_admin()) {
  function my_scripts() {
      //wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
      wp_enqueue_script( ‘redirect’, get_stylesheet_directory_uri() . ‘/js/redirect.js’);
  }
  add_action( ‘wp_enqueue_scripts’, ‘my_scripts’ );
}
?>

自作のJavaScriptをWordPressで利用する方法は幾つかあるのですが、
今回は子テーマに「functions.php」を追加して利用します。

「functions.php」で自作のJavaScriptを登録し出力する記述をします。
（wp_enqueue_script関数というのを使います。）

$handle : 登録する名前
$src : スクリプトファイルの場所
$deps : スクリプトより前に読み込む必要がある物を記述。
$ver : バージョン
$in_footer : フッターに入れるならtrue。head部分で出力ならfalse。

「if (!is_admin())」というのは管理画面は除外する条件分岐です。
URL（$src）ですが、今回は「子テーマ」に追加したディレクトリに「js」というディレクトリを作り、
その中に「redirect.js」というファイルを作りました。
「get_stylesheet_directory_uri()」で子テーマのURLを出力できますので、
「get_stylesheet_directory_uri() . ‘/js/redirect.js’」としています。

redirect.js（自動転送（リダイレクト）のためのjavascript）の中身

※●●●は対象となるURLを入れています。

// 転送前のURL
var targetURL = “http://●●●.●●●/”;
var nowURL = location.href;
// 転送先のURL
var mobaURL = “http://●●●.●●●/”;
if ( nowURL == targetURL
    && ( navigator.userAgent.indexOf(‘iPhone’) > 0
    || (navigator.userAgent.indexOf(‘Android’) > 0
    && navigator.userAgent.indexOf(‘Mobile’) > 0) ) ) {
      location.href = mobaURL;
    }

iPodやiPadからもリダイレクトする場合は
「navigator.userAgent.indexOf(‘iPod’) > 0」
「navigator.userAgent.indexOf(‘iPad’) > 0」を追記します。

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ