【WordPress】自分のサイトをWordPress化の作業-2日目-

こんにちは!
今回は自分のサイトのWordPress化の2日目です。

前回

functions.phpにCSSを読み込ませる記述をしたところからの
続きとなります。

やったこと

jQueryの読み込み
JavaScriptの読み込み
jQueryのプラグイン「lightbox」のCDNの記述
Webアイコンの「FontAwesome」のCDNの記述

function add_css_js() {
/*CSSの読み込み*/
    wp_enqueue_style( 'reset-style', 'https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css' );
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    wp_enqueue_style( 'lightBox-style', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css');
    wp_enqueue_style( 'FontAwesome-style', 'https://use.fontawesome.com/releases/v5.15.1/css/all.css');
/*Javascriptの読み込み*/
    wp_enqueue_script( 'main-sscript', get_template_directory_uri() . '/JS/script.js' );
    wp_enqueue_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
    wp_enqueue_script( 'lightBox-script', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js');
  }
  add_action( 'wp_enqueue_scripts', 'add_css_js' );

前回のも合わせてこんな感じになりました。

ソースコードもしっかり問題ないですね。

しかし、ここで疑問が
JavaScriptのファイルってbodyタグの最下部に書かないとだめなのでは？と思いました。
調べてみたらbodyタグの最下部で読み込ませる方法がありました。

参考にしたサイト

テーマにJavaScript（jsファイル）を正しい方法で読み込む

footer.phpのファイルが必要なので作成。
footerの中身を移動。

footerの閉じタグの前に
<?php wp_footer(); ?>を追加

wp_footer
‘wp_footer’ アクションフックをスタートさせる。
1日目の時にwp_headerの説明を書いていませんでしたが
‘wp_head’ アクションをスタートさせる。です。

bodyの閉じタグの前に
<?php get_footer(); ?>を追加

get_footer
footer.php テンプレートの読み込み

wp_enqueue_scriptのパラメーターに
array(),
false,
true

を追加すればfooterの後にScriptファイルが読み込まれます。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
WordPressで使用するスクリプトファイルをキューに追加します。

$handle
スクリプトの名前。

$src
スクリプトファイルまでのURL

$deps
このスクリプトを読み込む前に読み込むべきスクリプト（$handle）を配列形式で渡す。
初期値array()

$ver
バージョン番号の指定
初期値false

$in_footer
trueにするとスクリプトをフッターで読み込む。
初期値false

関数リファレンス/wp enqueue script

最後のパラメーターをtrue記述したおかげで
フッターで読み込まれるようになりました。

CSSとJavaScriptはこれでOKですね。

続いて画像がディレクトリにあっていないので修正作業。

404　Not Foundだらけですね。

今のテンプレートのフォルダーにimagesフォルダーを作成して
画像を全部入れます。

imgタグのsrc属性に
<?php bloginfo(‘template_directory’); ?>を追加

bloginfo(‘$show’);
サイトの情報を表示させる関数。
(テンプレートタグ）

$show
template_directory
アクティブなテーマのディレクトリー URL を表示します。
パラメーターは他にもあります。

テンプレートタグ/bloginfo

ほぼ使うことはないと思いますが
テンプレートフォルダーにある、imagesフォルダーを投稿や固定ページで
使う時に、絶対パスの記述が長くなってしまいますが
短くする方法が載っていました。

【WordPress】テーマフォルダの画像を呼び出すときの画像パスを短くする方法

すべてのimgタグに追加していきます。

index.phpの画像関係は良さそうですね。
CSSにbackground-urlで表示しているものが404　Not Foundですね。

しかし、CSSのはとっても簡単。
style.cssとimagesフォルダーは同じ階層にあるため

感想

投稿や固定ページを使わないサイトであれば
必要最低限なものなので終わりっぽい？

しかし、今回はカスタムページに各ギャラリーのテンプレートを作り
カスタム投稿に申し込んでくれた人のギャラリーを展示しようと思っているので
まだまだ終わりじゃないですね。
むしろこっからが未知の領域となりそうなので
試行錯誤しまくりの調べまくりになりそうです。

明日はカスタムページを作っていこうと思います。