ワードプレス化(子テーマいじり~)

HTML/CSSコーディングしたサイト、ワードプレス化の巻
子テーマ有効化から使用画像のリンク先というかパスっていいますか?
そこをphpで読み込む。までをやりました。

今回は、あるテーマをゆくゆくはカスタマイズしたい。
とのことだったので、子テーマを有効化しました。

で、まだphpコードを追加していなかったときは表示されました。
もちろん、cssも指定してないから効いてない状態ね。


サブドメイン
  ↓
wp-content
  ↓
theme
  ↓
〇〇-child(子テーマ)
  ↓
index.html(コーディング完了したindex.html)を置く
style.css(デフォルトであります。これは追加入力しない)
styles.cssディレクトリ(新規作成でstyles.cssフォルダ作成)
imagesフォルダを置く
  ↓
styles.cssディレクトリ内にコーディングしたstyle.cssを置く

ファイルマネージャーから入っていくのはこんな感じ。

※デフォルトであるstyle.cssは中を見るとコメントアウトで
theme:0000-child とかなんとか色々書いてると思います。
これは「このテーマを使いますよ」ってしるしなので、
仕様テーマとコメントアウトで書かれているテーマが同じことを確認したら閉じて放置。

で、ワードプレス化方法を書いてあるブログたくさんあるので、
読みやすいブログを参考にphpファイルにしていきました。

index.htmlを複製→名前変更→index.phpに
(ほんとはindex.htmlのファイル名を変更→index.phpに)
index.phpを複製→名前変更→front-page.phpに
front-page.phpを複製→名前変更→header.phpに
front-page.phpを複製→名前変更→footer.phpに
index.htmlを複製→名前変更→main.jsに

新規作成でファイルを作って名前つけてコピペする方法が一般的です。
同じ作業をすることになるので時間がもったいないですから。
でも私はコピペの時に範囲を間違えたらやり直さないとわからないので、
切り貼りせずにまとめて複製した後に切り取っていく方法を取りました。
慣れるまでは遠回りでもこの方法でいくかな。

index.phpはもうさわりません。
ほかのページに何かあった時に役に立ってもらいます(笑)
ホントは、表示させるとき何か不具合があった時に大活躍するのがこれ。
だからindex.htmlとindex.phpはキープです。触らずにね。
※index.htmlをindex.phpにファイル名変えるだけ。
と私が見た10こくらいの記事には書いてありました。

わたしもそう習いました。
ただ単に私が元のファイルを作業する近くに置いておきたいだけです。

まだまだミスが多いので心配過多状態です(笑)

front-page.phpの<!doctype.html>から</header>までをまず削除
front-page.phpの<footer>から最終行の</html>を削除
※scriptも含まれますがまとめて削除。

header.phpの<main>とか</header>の次の行から全て削除
footer.phpの<!Doctype.html>から<footer>が始まる直前までをまず削除
footer.phpの</footer>かな?<script>から</html>までも削除
main.jsの<!Doctype.html>から</footer>かな?<script>の直前まで削除

front-page.phpの1行目に<?php header();?>と入力
最終行に<?php footer();?>と入力

画像が使われている場所にphpで操作して表示するよってお知らせコードを入力します
<img src=”00000.png”>と書いてあったら
<img src=”<?php get_stylesheet_derectory_uri();?>/00000.png”>に直します
直すというより、追加する。ですね。

header.php、front-page.php、footer.phpの3つとも。
一斉書き換えって機能があると思いますので、
使える方はそれで一括で書き換えてください。
私はまだ一括書き換えのショートカット?
をおぼえていないので一個一個ちまちまコピペしました(笑)

この時適用したいテーマが親テーマだったら
<?php get_template_derectory_uri();?>/ と入力します


今回は子テーマを使うので、
<?php get_stylesheet_derectory_url();?>/ なんですね~。

templateだと読み込むときに親テーマを探しに行っちゃうから
みつからないよ~って状態になる。という感じです。
多分、例外はあると思います。
この場合は違うよって場合が。
でも今回は通常通りに。ざっくり覚えておきます。


これ知らなくて。
サイトを確認しようとしたらエラーでアタフタ
しばらくエラーの原因探すのに大変しました。
<?php get template_derectory_uri();?>/ でしょ?
なんで?ってスペルミスの方ばかり気にしてた。。
思い込みってホント怖い^^;
<?php get_stylesheet_derectory_uri();?>/ です。
最後の閉じタグ / も忘れずに

明日はヘッダーとフッターのメニュー部分のパス書き換え
と各ページ(固定ページ)を作りたいと思います。

コメントを残す

%d人のブロガーが「いいね」をつけました。