WordPressでGumbyをCDNから使う方法

GumbyFramework - cdnjs.com

cdnjs.comからGumbyのJavaScript/CSSライブラリを参照することができます。

functions.phpに追加

CSSとJavascriptを両方CDNから読み込む場合

function gumby_enqueue_stylesheet() {
	wp_enqueue_style('gumby-style', '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.min.css' );
}
function gumby_enqueue_scripts() {
	wp_enqueue_script( 'modernizr' , '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js' );
	wp_enqueue_script( 'gumby'     , '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/js/libs/gumby.min.js' );
	}
}
add_action( 'wp_print_styles', 'gumby_enqueue_stylesheet');
add_action( 'wp_print_scripts', 'gumby_enqueue_scripts');

JavascriptはCDNからCSSは自分で編集した物を使いたい場合

function gumby_enqueue_stylesheet() {
	wp_enqueue_style('gumby-style', get_template_directory_uri().'/css/gumby.css' );
}
function gumby_enqueue_scripts() {
	wp_enqueue_script( 'modernizr' , '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js' );
	wp_enqueue_script( 'gumby'     , '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/js/libs/gumby.min.js' );
	}
}
add_action( 'wp_print_styles', 'gumby_enqueue_stylesheet');
add_action( 'wp_print_scripts', 'gumby_enqueue_scripts');

こんな感じですかね。

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です