おやじ50歳からがんばる50歳を過ぎて定年の時を考えて、今から何ができるか考えスキルを身に着けていく日々を投稿していきます。2022.12.04追加記事(学習を進める途中で記事内容を追加しました。22年12月4日)テンプレートファイルとしては「header.php」「footer.php」「sidebar.php」を書いてきました。これまでは一般的な各テンプレートファイルの考え方で作成してきました(これまでの記事もそうでしたし、よくある動画でも、決まった部分を切り出して各テンプレートファイルにする方法が紹介されています)今回、別の動画も参考に復習を進めている中で、全く違う切り出し方をされていました。<footer>~</footer>まであとは必要に応じて別テンプレートファイルとして読み込む。・無理に1つのテンプレートファイルにする必要はない。・後々の変更を考えると別テンプレートファイルとした方が対応しやすい。全体をよく見てうえで、どういう構成にするのがいいのかをしっかりと考えてテンプレート化してくことが重要なんだと感じました。ベースとなる部分のWordPress化をやっていきます。「header.php」「index.php」「footer.php」を完成させます。ここで新たなファイル「functions.php」も登場!ますます混乱です(笑)でもめげずに頑張って整理していきます。追加記事(学習を進める途中で記事内容を追加しました。22年12月4日)今回やっていくことファイルパスを修正するWordPressの管理画面で設定したテーマ毎の情報を読み込むテーマ独自のファイルを読み込むbodyタグに固有のクラス名をつける(ページ毎にデザインを変更するのに便利)WordPressがコードを出力する場所を追加するまとめ今回やっていくことファイルパスを修正するWordPressの管理画面で設定したテーマ毎の情報を読み込むテーマ独自のファイルを読み込む整理してみるとこんな感じになりましたが、やってみるとムズカシイ(汗)なので、一つ一つ整理していきます(教則本をみながらやっていきます)ファイルパスを修正するHTMLファイルでは、画像やCSSなどのファイルを読み込むためには「相対パス」で記述する必要がありました。ところが、WordPressでは「相対パス」を扱うことができないので「絶対パス」に書き換える必要があります。実際に読み込む先は各テーマによってディレクトリが変わってしまうので、有効となっているテーマフォルダーへのパスを動的に取得する必要があります。そこで「get_template_directory_uri()」関数が登場します。?>/assets/css/style.css”となります。「相対パス」の部分を修正!(CSSや画像、JavaScriptのファイル読み込み部分です)WordPressの管理画面で設定したテーマ毎の情報を読み込むこれがいろいろとあります。管理画面で設定している内容に置き換えるための修正です。テーマ独自のファイルを読み込むこの後は、「functions.php」も作成した記述にも変更していきます。赤文字部分を追加します。WordPressがコードを出力する場所を追加する</head>の直前に「wp_head()」関数を追加します。これは、WordPress本体・テーマ・プラグインで用意されているHTML、CSS、JavaScriptを出力するために必要です。これらを出力するための命令を「functions.php」に記述していくことになります。同様に</body>の直前には「wp_footer()」関数を追加します。?>これで準備が整いました。教則本では、これ以外にも「wp_body_open()」関数(<body>の直後に追加)などもありましたが、今後の拡張のためのようなので、ここでは割愛しました。ページのタイトルについても、各ページごとに適切なタイトルにするために「functions.php」に記述していきます。記載が終わったら、「header.php」「footer.php」の該当箇所を削除します。)最後の方はちょっと簡単なまとめになってしまいましたが、「functions.php」の記述は教則本などを見ていただく方が分かりやすいので、ここでは詳細は割愛しています。まとめこれでベースとなる部分のWordPress化までは完了になります。ここから先、固定ページや投稿ページなどのテンプレートファイルの作成などに入っていきます・・・ここまでの理解も自分の中ではまだまだ(70%くらい)ですが、内容を復習しつつ、この先の学習を進めていきたいと思います。オリジナルテーマ作成5すこし時間があきましたが、これまでの学習方法としては・「WordPressオリジナルテーマ制作入門」を使った学習・「ちゃんと学ぶ、WordPressテーマ開発講座」による動画(Udemy)を実践してきました。HTMLの入門書を読み始めたのが21年の5月か6月頃でした。本格的に勉強を始めたのが年末ぐらいだったので、半年程度が経過しました。今年に2月からはProgateでの勉強も始めました。...HTML&CSS模写コーディング終了やっと、1回目の模写コーディングが終了しました。1か月くらいかかってしまいました(時間かけすぎ)今回の模写での反省や気付きを次回、キチンて整理してアップしていきたいと思います。疲れました...次回も頑張ります。オリジナルテーマWordPressオリジナルテーマを制作するための学習についての記事です。HTML&CSS表やリストの使い分け(dl,table,ul/ol)引き続きWordPress化について取り組んでいますが、やっていた課題の中で表(リスト)を表示させる部分がありました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δホーム50代からの挑戦HTML&CSSこれを書いている人サトル神戸に住む50代オヤジです。50歳を過ぎてからこの先のことをいろいろと考えるようになりました。52歳になってから転職した普通の会社員です。趣味でドラムを叩いたり、たまにサンバチームでも太鼓を叩いています。このブログはWordPressの勉強のために始めました。サトルをフォローするリンク私が参加しているサンバチームです。InstagramTwitter(準備中)FacebookHomePage書籍購入ではいつもお世話になっています。このブログで使っているレンタルサーバーです。このドメインはこちらで準備しました。おやじ50歳からがんばる.ホーム検索トップサイドバ。