ワードプレスでCSS、JavaScriptファイルを読み込んで利用する


ワードプレス上でasciinemaで録画したgifを表示させたかったので

そのためのCSS,JavaScriptの読み込みをするぞい!

CSSとJavaScriptの読み込みかたは以下のページを参考に

http://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html

読み込むJS,CSS,JSONファイルはasciinemaの保存した動画ページのダウンロードボタンからダウンロードしておく

functions.phpの最後に以下追加

// JS・CSSファイルを読み込む
function add_files() {
// WordPress提供のjquery.jsを読み込まない
wp_deregister_script(‘jquery’);
// jQueryの読み込み
wp_enqueue_script( ‘jquery’, ‘//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js’, “”, “20160608”, false );
// サイト共通JS
wp_enqueue_script( ‘smart-script’, get_template_directory_uri() . ‘/js/asciinema-player.js’, array( ‘jquery’ ), ‘20160608’, true );
// サイト共通のCSSの読み込み
// wp_enqueue_style( ‘main’, get_template_directory_uri() . ‘/css/asciinema-player.css’, “”, ‘20160608’ );
}
add_action(‘wp_enqueue_scripts’, ‘add_files’);

こんな感じに表示される



表示に利用するjsonファイルの場所は/ワードプレスのインストールディレクトリ/に配置する
微妙にjsonファイルの置き場所で躓いたなー

シェアする

  • このエントリーをはてなブックマークに追加

フォローする