WordPressのメディアを追加する機能は大変便利なのだが
一点だけ面倒な点がある
画像の場合はいちいち張った後に編集で
新しいタブに読み込むをチェック入れないと画像をクリックすると
そのタブに読み込んでしまうので記事を読み直すのに戻るのが面倒
そこでWordPressの記事部分に張られた画像なら自動で新しいタブに読み込む
javascriptを導入しようというのが目的
さてここで前回の子テーマ作成が生きてくる
導入方法はまずWordPressの子テーマフォルダに「js」フォルダを作ったら
こちらのサイトより「image-newwindow.zip」を入手し中身の
image-newwindow.jsをjsフォルダにコピーする
今回はスクリプトを読み込むための関数を定義するため
functions.phpを編集するのだがせっかく子テーマを作ったのだから
子テーマ用に新たにfunctions.phpファイルを作る
functions.phpに以下のコードを入力し子テーマフォルダにアップロードする
<?php
/*-------以下追記-------*/
//管理画面以外で使用する
if (!is_admin()) {
//JavaScriptの読み込みコードを関数にまとめる
function my_scripts() {
//テンプレートディレクトリのパス(親テーマのフォルダ)
$dir = get_template_directory_uri();
//JavaScriptを読み込む
wp_enqueue_script('image-newwindow',$dir .'/../techismchild/js/image-newwindow.js', array(), NULL, true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
}
?>
wp_enqueue_script() を利用してjavascriptを読み込むためのコード
書式は wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handleはスクリプト名で普通は.jsファイルのファイル名と同じ
$srcにjsファイルのあるURLを入力するのだが$dirでURLを指定する関数を定義
注意点としてget_template_directory_uri()は親テーマのフォルダURLを表すので
/..で親フォルダの1つ上のフォルダを示している(ここではthemsフォルダの事)
・テーマフォルダ構成
/themes ― /techism
L /techismchild/js/image-newwindow.js
function my_scripts()でwp_enqueue_script()自体を関数として定義すると
複数のスクリプト読み込みができるようになるので非常に便利
*子テーマのfunctions.phpは必ず追記したいコードのみを書くこと
親テーマの一部をコピーなどするとエラーでサイトが真っ白になる
*このスクリプトでは画像のURLからWordPressの画像フォルダである
uploadsと言う単語を検索して機能しているんで
他のフォルダにアップされた画像は動かない
これでいちいち画像を張った後にクリックで編集しなくても
画像が新しいタブに読み込まれるようになる
＊追記
過去のJUGEM時代の記事に張られた画像も開けるように
スクリプトをすこし改造してみた
image-newwindow.jsをテキストエディタなどで開いて以下のように変更する
function imgNewWindow(){
var linkTag = document.body.getElementsByTagName('a');
for(var i=0; i<linkTag.length; i++){
var attr = linkTag[i].href;
var point1 = attr.indexOf('uploads'); //変数名をpoint1からに変更
var point2 = attr.indexOf('jugem'); //jugemを検索文字に追加
if(point1 !== -1 || point2 !== -1){ //point1とpoint2の条件を倫理和にして否定する
linkTag[i].target = '_blank';
}
}
}
function addEventSet(elm, listener, fn){
try{
elm.addEventListener(listener, fn, false);
}catch(e){
elm.attachEvent("on"+listener, fn);
}
}
addEventSet(window, "load", function(){imgNewWindow();});
以上でWordPressのuploadsとjugemと言うフォルダに入れた画像なら
新しいタブで読み込まれるようになった
コメントを残す