鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

静的HTMLをwordpress化するときの手順と途中つまづいたこと

wp-content/themes/ 配下に、フォルダを作る

名前はなんでもOKです。

settenとしました。

その中に、wordpress化したいサイトの静的HTMLファイルを入れます。

このままでは、テーマとして認識されないので、拡張子は、 .php にかえます! これで認識されるようになります。

Wordpressダッシュボードメニューの、「外観」をみると、選べるようになっています。

f:id:TACOSVilledge:20210306072443p:plain

ここで表示されるテーマの名前は、 style.css のトップで指定した名前になります。

/*
Theme Name: setten_wordpress
*/

引っかかったところのメモ

CSSの読み込み

通常の <link> タグのところを、

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">

としました。

CSSファイル内で、background-image で読み込んでいる画像のパス

Wordpressのタグの埋め込み方や、cssファイルをphpファイルに変換してphpタグを埋め込む? など、いろいろ考えて苦労したのですが、なんてことはない、そのままの置き場所のパスを指定すればいいだけでした。

参考になったサイト: 同じように、苦労して答えが拍子抜けだったとこの人もかいていました。

WordpressでCSSにbackground-imageに指定した画像が表示されない問題 - Qiita

headre.php にはどこまで入れるのか?

一番トップ( <!DOCTYPE html> タグ)から、

(つまりメニューバー)の下まででした。

要するに、他のページでも同じものを読み込みたいところまで、このファイルでまとめておく、ということだと理解しました。

<body> タグは、 <body <?php body_class(); ?>> に置き換えます。

必要なクラスを入れてくれるらしい。

</head> の閉じタグの直前に、 <?php wp_head(); ?> を入れます。

footer.php

他のページでも使いたいfooterに値するところ(

)を含む、最後まで。

最後に、

<?php wp_footer(); ?> を入れる。

JSの読み込み

これがかなり苦労しました。

間違っていた点:

functions.php の名前を、 function.php としていた。。。 同じことをしていてteratailで聞いている人がいて、私も気づいた。

PHP - function.phpが読み込まれません。|teratail

オリジナルテーマの場合は、組み込まれているjqueryを読み込まないといけなかった。 wp_head の上に下記のように入れる。consoleを見ると、読み込まれたことがわかる。

<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head(); ?>

コンソールに、

JQMIGRATE: Migrate is installed, version 3.3.2 jquery-migrate.min.js?ver=3.3.2:2 

と出ていたら、jqueryが読み込まれている。

さらに、そもそもなのだが、 functions.php の中で、 <?php ?> タグで全体を囲っておかないといけない。

phpの基本だが、それをつけていなかったのでphpが読み込まれていなかった。

ここまでやって、やっと、ファイルが読み込まれ、コンソールにエラーが表示されるようになった。

ここからは、WordpressjQueryの書き方が特殊ということで、 $ が使えないらしい。

$を "jQuery" に置換

これは、コンソール見ながらエラーの部分を追っていくと分かったが、基本的に全ての $ マークは、 "jQuery" という文言に置き換えさせられた。

これでやっとjsが無事読み込めて、静的HTMLがWordpress化が一旦できた。

あと一応、Adobeのtypekitのscriptがあったのだが、これはそのままheadタグ内にコピペしたら、ちゃんとフォントが表示されるようになった。