WEBCAMP:経済産業省が認定!エンジニア転職成功率98%!HikoProこんにちは!大学生フリーランスエンジニアのHikoProです!WordPressをカスタマイズしたいけどどうすればいいか分からない。子テーマをカスタマイズすれば良いと聞いたことがあるが、どうやって子テーマを作るの?あと、なんで親テーマをカスタマイズしたらいけないか理由も教えて欲しい。【初心者向け】WordPressとは?できること、使う前の基礎知識を解説WordPressってそもそもなんなんだろう。これからWordPressを使ってサイトを立ち上げようと思うが、最低限必要な知識を学んでおきたい。親テーマ・・・メインのテーマ子テーマ・・・カスタマイズ用のテーマ(親テーマを部分的に編集する)この2つのタイプがあります。人気のWordPressテーマや、ブロガー向けのWordPressテーマにはこの子テーマというのがほとんど作られており、親テーマ同様にインストールして使用することができます。子テーマがあるWordPressテーマの例Cocoon:最強のブロガー向け無料のテーマ(僕のサイトでも使用しています)JIN:人気No1のブロガー向け有料テーマプログラミング知識のない、ブロガー向けのWordPressテーマには子テーマがあるケースが多いですが、商用利用可能のテーマやビジネス向けのテーマはオリジナル性を持たせるためプログラマーがカスタマイズする必要があるので、「子テーマは自分で作ってね!」というケースが多いです。子テーマがないWordPressテーマの例Xeory:バズ部が提供する商用利用可能の無料テーマBizvektor:ザ!コーポレートサイトを作りたいときに使うシンプルな無料テーマ親データでカスタマイズするとアップデート時に問題が!ネコ君なんで親テーマでカスタマイズしたらダメなの?Hiko親テーマを直接編集すると後からトラブルが起きてしまいます!WordPressのテーマは、開発者が定期的にアップデートを行います。アップデートする際には親テーマを更新するわけですから、もし親テーマをカスタマイズしてしまうと、アップデートする際にカスタマイズ内容が更新されてしまいます。子テーマを作ってカスタマイズすることにより、親テーマをアップデートしてもカスタマイズ内容が上書きされることがありません。その他のメリットとしては、子テーマをカスタマイズした際に、もし何か表示崩れが起きたり記事が正しく表示されなくなってどうしようもないときでも、親テーマを有効化すればデフォルトの状態に戻すことが可能です。編集したいファイルを編集していきカスタマイズする1.子テーマのフォルダを作る(親テーマ名+-child)まず始めに、子テーマのファイルをまとめるために子テーマのフォルダを作成します。-childで名前をつけて子テーマフォルダを作成します。この子テーマフォルダの中に、カスタマイズしていくファイルを格納していきます。2.style.cssを作る次に作成した、子テーマフォルダの中(xeory_extension-child)にstyle.cssファイルを作成します。親テーマのフォルダ名(超重要)style.cssの冒頭にこのように記入します。Templateの部分は、一つでもスペルミスがあると正しく子テーマが認識されないので、注意してください!3.functions.phpを作る次に、親テーマのデータを継承するために子テーマフォルダ内にfunctions.phpファイルを作りコーディングしていきます。作成したfunctions.phpに下記のコードをコピペします。Resourcesdeveloper.wordpress.orgこちらのWordPress公式サイトから引用しています。次に作成した子テーマフォルダをWordPressの管理画面から有効化していきます。このように、管理画面に進むと子テーマが表示されていると思うので、有効化します。子テーマが表示されていない場合は、style.cssとfunction.phpの記載ミスが原因なので、もう一度チェックするようにしましょう!5.編集したいファイルを編集していきカスタマイズする主にカスタマイズする内容として多いのが、、、style.cssを編集してデザインをカスタマイズするheader.phpやfront-page.phpのHTMLやPHPコードを編集するこの2つが主にカスタマイズする内容だと思います。この.cssファイルと.phpファイルをカスタマイズする際には特徴と注意点があって、、、style.css→親テーマのstyle.cssに追加する形になる.phpファイル→親テーマの.phpファイルに上書きする形になるこの特徴をしっかりと覚えておきましょう!style.cssに追加でコードを書きカスタマイズ「ここの背景色を変えたいな!」「このレイアウトを変更したいな!」などのスタイルをカスタマイズする際には、子テーマ内のstyle.cssにCSSでコーディングしていけばOKです!←このように好きなスタイリングをしていってデザインをカスタマイズしていきます!header.php(.php系のファイル)をカスタマイズheader.phpなどの.phpファイル系をカスタマイズする際にはいくつかポイントがあります。親テーマの.phpファイルを子テーマ内に複製するhtmlやphpを編集していくこのように、新規で子テーマ内にheader.phpと作成するのではなく、親テーマのheader.phpを複製する必要があります。(コピペでもOK)まず始めに、カスタマイズしたい.phpファイルを親テーマのフォルダ内からコピーします。次にそのコピーした、.phpファイルを子テーマのフォルダ内にペーストします。まとめネコ君これで、WordPressで自由にカスタマイズできるようになったよ!いかがでしたでしょうか!!WordPressをカスタマイズする際には、必ず子テーマを作ってカスタマイズする!これだけはしっかりと覚えておきましょう!最後までご覧いただきありがとうございました!WordPressの学習にオススメの本リンクWordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。Reserved.タイトルとURLをコピーしました。