[js] HTMLのimgタグを修正せずに別の画像がある場合は置き換える

カテゴリ:
Web
javascript
| トラックバック(0)
投稿者:yo yo
// JavaScript Document
jQuery(function(){
	function splitExt(filename) {
		return filename.split(/(?=\.[^.]+jQuery)/);
	}

	jQuery("img").each(function(){
		var target = jQuery(this);
		var src = target.attr("src");
		var src_split = splitExt( src );
		var src_sp = src_split[0] + '-sp' + src_split[1];
		target.attr('data-src', src);
        // ここの部分は
		var img = new Image();
		img.src = src_sp;
		img.onload = function() {
			target.attr('data-sp-src', src_sp);
		}
        //
        /* こういう書き方もできる
            var x = new XMLHttpRequest();
            x.open("HEAD", src_sp, false);
            x.send(null);
            x.status; // 404 or 他を判定
        */
	});
	
	// カスタムイベントで画像切り替えのコードとか
	
});

「ウェブサイトのレスポンシブ化対応などで既存のHTMLを修正したくない。けど、スマホ向け画像があったらそっちを表示させたい。」とかいう場合に使う。Javascriptで画像の有無を調べてある場合はそちらを表示、ない場合は既存を表示させる。

[js] ブラウザのJavascriptが有効かどうか調べてcssのクラス名を切り替える

カテゴリ:
javascript
| トラックバック(0)
投稿者:yo yo
<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
<title>Javascriptが有効かどうか調べる</title>
<script>
/*JavaScriptの検出*/
(function(html){
	html.className = html.className.replace(/\bno-js\b/,'js')
})(document.documentElement);
</script>
</head>
<body>
</body>
</html>

Wordpressの公式テーマでも使われている昔からあるヤツ。ブラウザのjsが有効ならclass no-jsがjsに変わる。

[Wordpress] 管理画面のコメントサブメニューに独自リンクと機能を追加

カテゴリ:
Web
Wordpress
| トラックバック(0)
投稿者:yo yo

function.php

/* **************************************************************************
管理画面のメニュー->コメントにCSV出力を追加
*************************************************************************** */
add_action('admin_menu', 'remove_menus');
function remove_menus () {
	global $submenu;
	$submenu["edit-comments.php"][] = array(
		'CSV出力',
		'read',
		get_template_directory_uri() . '/export_comment.php' // 例えばコメントデータをCSV出力する機能
	);
}

[雑記] 住宅展示場で開催されるヒーローショー

カテゴリ:
雑記
| トラックバック(0)
投稿者:yo yo

先日、住宅展示場で開催されていた無料のウルトラマンショーを子供と見に行った。目の前でウルトラマンが動く姿はとても格好良く、子共と一緒に興奮でき、とても良い体験だったと思う。

当たり前だが客寄せとしてショーは使われている。小さい子を連れた親子がそのまま住宅購入のメインターゲットだから無料でも開催しているのだろう。

[Wordpress] ワードプレス内でAjaxを使う

カテゴリ:
Web
Wordpress
| トラックバック(0)
投稿者:yo yo

うん番煎じだって話だけど、コピペ用として書いているだけなので詳しくは公式リファレンスを見てください。

function.php

// ajax enqueue
add_action( 'wp_enqueue_scripts', 'ajax_enqueue' );

// ajax function
add_action( 'wp_ajax_' . 'ajax_action', 'ajax_js' );
add_action( 'wp_ajax_nopriv_' . 'ajax_action', 'ajax_js' );

/**
 * jsファイルを読み込む
 */
function ajax_enqueue() {
	$handle = 'ajax_handle';
	$action = $handle . '_action';
	
	// 読み込むスクリプトファイル(※依存関係:jquery)
	wp_enqueue_script( $handle, esc_url( get_template_directory_uri() ) . '/js/ajax.js', array( 'jquery' ) );
	wp_localize_script( $handle, $handle, array(
		'api' => admin_url( 'admin-ajax.php' ),
		'action' => $action,
		'nonce' => wp_create_nonce( $action )
	) );
}

/**
 * ajax action
 */
function ajax_js() {
	$handle = 'ajax_handle';
	$action = $handle . '_action';

	// NONCEチェック
	$nonce = isset( $_POST['nonce'] ) ? $_POST['nonce'] : '';
	if ( ! wp_verify_nonce( $nonce, $action ) ) {
		status_header( '403' );
		$data = 'Forbidden';
	}
	// クエリでデータを取り出す
	$query = new WP_Query();
	
	try {
			//JSON形式で出力する
			header('Content-Type: application/json');
			wp_send_json( $query );
			exit;
	}
	catch (PDOException $e){
			//例外処理
			die('Error:' . $e->getMessage());
	}
}

ajax.js

jQuery.ajax({
    type: 'POST',
    dataType:'json',
    url: ajax_handle.api,
    data:{
        nonce: ajax_handle.nonce,
        action: ajax_handle.action
    },
    success:function(data) {
    	console.log(data); // json data
    }
});
ページの先頭に戻る