WordPressでJavaScript !スマホからのアクセスのみリダイレクト

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」を追記します。

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

インディーズでミュージシャンをやっていたのですがいつのまにか...

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

昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 Excel VBA 」を活用した効率化ツールの開発、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、テロップ入れや映像の切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク

コメント

  1. […] 『自作のJavaScriptをWordPressで利用してスマホからのアクセスのみリダイレク… の時に作成した子テーマのstyle.cssで入力しました。 […]

  2. […] 「自作のJavaScriptをWordPressで利用してスマホからのアクセスのみリダイレクト…」で 記載した内容と同じですが、自作のJavaScriptを登録し出力する記述をします。 […]

  3. […] こちらは「自作のJavaScriptをWordPressで利用してスマホからのアクセスのみリダイレクト…」で 紹介した内容と同じ手順で、「wow.min.js」を「functions.php」に追加します。 「wow.min.js」はこちらからダウンロード出来ます。 今回、ダウンロードしたjsファイルはテーマフォルダの中に「js」というフォルダを作成してアップしました。 […]