GOMA(ゴーマ)の休日2017年京都胡麻(ごま)に移住、田舎暮らしを提案するデザイン事務所GOMA(ゴーマ)クマさん(夫)とキノコ(妻)。サイクリングやテクノロジー、DIY、田舎暮らしの情報などを中心に誰にでもわかりやすく解説しています。(ゴーマ)】くまさん(夫)ときのこ(妻)のユニット。京都胡麻(ごま)に移住して、新しい田舎暮らしを提唱するGOMA(ゴーマ)を立ち上げました。ゲストハウス経営とサイクリングツアーをはじめとしたアウトドアアクティビティ、ウェブデザイン、デジタルマーケティング、ドローンフォトグラファーなど多業を行なっています。サイクリングやテクノロジー、DIY、田舎暮らしの情報などを中心に誰にでもわかりやすく解説しています。Zwiftでヴァーチャルライド中心にロードバイクを楽しんでいます。Higashiura(https://gomanote.com/)」。2019年夏からマラソン挑戦に続き2020年からトライアスロン挑戦。子テーマの設定完了!子テーマの構造についてさあ、何も恐れることはない!ガンガンカスタマイズだ!まとめwordpressの子テーマの作り方って理解できてますか?くまさん僕は最初まーったく理解できませんでした。最近web制作の現場ではwordpressのカスタマイズがメインになることがほとんどではないでしょうか?僕がwebを触り始めた2005年ごろは、テーブルレイアウトのサイトがメインでした。そこから時代が変遷し、CSSやらCGIやらCMSやら何やら何やらいろいろ出てきて、今はwordpressを扱うことがほとんどです。htmlとCSSは理解できても、wordpressはちんぷんかんぷんな方もい多いのではないでしょうか?そんな、今からwordpressカスタマイズを始めようとする人が、ほとんどつまずくモノが「子テーマ」であると断言できます!僕もそうでしたから。この記事では、wordpressの子テーマの作り方について、誰でも100%わかる内容で記事にしてみようと思います!子テーマを作る前に子テーマとは簡単に言うと、「wordpressのテーマを安心してカスタマイズする」ための物です。wordpressはCMSと呼ばれるブログベースのシステムです。根幹には「記事」があり、テーマを着せ替えるだけでサイトの見た目を簡単に変えることができます。最近はコーポレートサイトの案件でも、記事をクライアントが更新できるwordpressで作ることが本当に多くなってきました。TCDなど国内の有料テーマを選べば、驚くほど簡単に美しいサイトを構築することができます。そんなwordpressのテーマですが、ソースコードやCSSを直に触ってカスタマイズした場合、テーマの更新で全部消えてしまった!という事態が起こります。くまさん最近も取引先の方がそれでカスタマイズを全てパーにした話を聞きました。背筋が凍ります!ローカルで更新ファイルを管理していれば問題ないのですが、非常に煩わしく大変ですよね。そんな問題を全て解決してくれるのが「子テーマ」なのです。環境を整えるではここから、子テーマを作る前の環境整備を、僕のやり方を例にとって説明していきます。構造を理解するwordpressを本格的にカスタマイズするにあたり、初心者の人が一番怖いのが「phpファイルを触る」と言うことではないでしょうか?ご存知の通りhtmlやCSSは静的ファイルなので、web構築の基礎を学んだ方であればそれほどハードルは高くないと思いますが、PHPファイルは動的ファイルです。間違うだけでサイトそのものがエラーで落ちる、なんてことも多々あるので恐怖ですよね?くまさん僕はそれでサイトを全て粉砕したこともあります。恐れることはありません。バックアップを取って触れば良いのです。PHPファイルそのものは動的プログラムですが、最終的に出力されるのはHTMLです。そこを理解して触れば初心者でもどんどんwordpressをカスタマイズできます!ローカルでの作業に徹する脅されます。wordpressの管理画面には、直接テーマを触ることができるエディタがついていますが、ここでカスタマイズすることは100%おすすめできません。wordpressさんも上記のように注意!を促してきます。言うわけで、テーマをカスタマイズするときはローカルでの作業環境を構築する、というのが僕のおすすめのやり方です。ローカルの作業環境構築方法では、僕のおすすめの方法を説明していきます。くまさんマクロメディア時代からかれこれ10年以上お世話になっております。CCの環境を例にとって進めていきますね。子テーマの作成方法くまさんさて、ここからが本題です。今ちょうどカスタマイズしているTCDのテーマ「KADAN」を例にとって進めていきましょう。テーマディレクトリのダウンロードやり方は割愛しますが、サーバーに接続し「themes」ディレクトリの中でカスタマイズしたいテーマのディレクトリをローカルにダウンロードします。ここでは「kadan_tcd056」というディレクトリがそれにあたります。子テーマのフォルダを作ろう子テーマの親となるテーマと同一の階層に、新しく子テーマのフォルダを作ります。ここではわかりやすいように「kadan_tcd056-child」と、最後に「-child」をつけて作成しました。子テーマフォルダの中身を作ろう作成した子テーマフォルダの中に、必要なファイルを二つ準備します。「function.php」と「style.css」です。「function.php」ですが、中身に以下のコードを書き込み保存します。他には何も必要ありません。array('parent-style'));}?>くまさんfunction.phpですが、最終行に改行を入れると動作しない不具合が出ることがあります。style.cssの設定style.cssは、親フォルダからそのままコピーして使用します。その方が今後のカスタマイズが楽になります。コピーしたら、テーマのバージョン情報などがコメントアウトして書いてあると思いますので、そこを以下の内容で上書きします。Name:子テーマの名前(必須)フォルダにつけた名前をそのままつけるとわかりやすいです。テーマの配布ページなど。Description:説明文です。URI:作者のURITemplate:親テーマフォルダの名前(必須)Version:バージョン管理する場合は記述。NameとTemplateは必須です。他はなくても動作します。最低この2つのファイルが用意できたら子テーマの準備は完了です。サーバーへファイルをアップロードします。子テーマを有効化しよう上記の準備ができたらwordpressの管理画面へ戻ります。これで子テーマがwordpressに認識されて有効化できます!ついでに、管理画面のサムネイルをかっこよく表示したいので準備も合わせて行いましょう。子テーマサムネイル設定方法そのままではサムネイルがなくてさみしいので設定してみましょう。「screenshot.jpg」(pngも可)という名前の画像ファイルを用意します。中身は4:3のサイズならピクセル数は問いません。それを子テーマのフォルダに入れてアップすれば、子テーマのサムネイルが表示されます!子テーマの設定完了!これで子テーマの設定が終了しました。子テーマの構造についてテーマのバージョンアップが行われる際は、基本的にテーマのディレクトリ内が全て上書きされます。ファイルの内容をカスタマイズしていてる場合上書きされてしまうわけです。子テーマの構造について説明します。ルールとして、子テーマが設定された場合、必ず子テーマディレクトリ内のファイルから優先的に参照します。上記の場合、「footer.php」「front-page.php」のカスタマイズを行うために、親ディレクトリからファイルをコピーして持ってきています。これにより、「footer.php」「front-page.php」のファイルは子テーマ内のものが読み込まれるので、こちらをカスタマイズして入れば親テーマのディレクトリが全て上書きされても問題ないのです。あとは、カスタマイズしたいファイルを親テーマフォルダから子テーマフォルダにコピーして、カスタマイズしてアップロードの繰り返しです。さあ、何も恐れることはない!ガンガンカスタマイズだ!くまさんここまで来たらあとは好きにLETSカスタマイズ!あとは、CSSなりファイルなりをガンガンカスタマイズしていくだけです。カスタマイズ場所を知りたい場合は下記のChromeデベロッパーツールを利用するのがおすすめです。画面で「ここをカスタマイズしたいなー」という場所を右クリック、メニューから「検証」を選択するとデベロッパーツールの登場です。コードやCSSを画面上で触れちゃいますので、「ここのwidth広げたいな〜」とか、「このテキストもうちょっとデカくしたいな〜」とかを直接画面上でテストできます。どのCSSが作用しているかもわかるので、確認したらあとは子テーマのCSSのコードを書き換えてアップロードすればOKです。くまさんいやー、便利な世の中になりました!まとめいかがでしたか?子テーマの作り方がわからない方も理解することができたのではないでしょうか?wordpressの構造が理解できたら、カスタマイズの自由度ががぶわーっと増えます。それに子テーマがものすごく役立ちます!子テーマさえ作っておけば、カスタマイズファイルがphpエラーを出しても最悪親テーマフォルダから持って来れば必ず復旧できます。さあ、皆さん恐れずにLETSカスタマイズ!プロが教えるwordpressによるコーポレートサイトの作り方wordpressによるコーポレートサイトを作ろう!くまさん僕のwordpressによるコーポレートサイトの作り方を伝授します!プロフィールを見ていただければわかりますが、僕はwebもやるデザイナーです。いえ最近の案件の中心はwebサイト構築が多く...gomanote.com2018.08.10GOMAデザインもっと楽しく伝わる「カタチ」をつくりませんか。京都を中心に、ローカルでビジネスを行う中小企業や団体に着目したホームページ制作会社です。地元を元気にするページづくりを心がけます。ウェブのちょっとしたことから、ウェブ制作・リニューアルまで、お話をじっくり聞いて最善の選択ができるようご提案しています。くまさんの10年以上のデザイナー歴で獲得したノウハウと、東京、大阪で磨いたきのこのマーケター視点から見た最新のトレンドで、印刷物、web、広報、SNSを「どうやって使って成果に結びつけるか」まで、責任を持ってお手伝いします。プロフィールを見ていただければわかりますが、僕はwebもやるデザ...2018.08.10デザイン&マーケティングユーザー目線でホームページをリニューアルしました。こんにちは、くまさんのマネージャーきのこです。GOMA(ゴーマ)のオフィス兼ゲスト...2018.05.13デザイン&マーケティングハンバーグに釣られて「新規顧客開拓」をお手伝いした話。こんにちわ!今回は京都亀岡で20年目を迎える和食居酒屋さんのご依頼で、チラシを作成したお話をきのこがお送りします。こんにちわ!GOMAくまさんの妻きのこです。今回はホテルを営んでおられるクライアントさんからのご依頼で、サイトのリニューアルおよび自社サイトの中で稼働する予約...2018.02.23デザイン&マーケティングネットがない!!ウェブ屋は移住に向いてるのか検証してみた。GOMA始まって最大のピンチ。PMすみません!作成出来たので大丈夫です。AMWordPress初心者でブログ拝見させていただきました。子テーマについてなんですが、有効化して、ずっと子テーマのほうで変更していくということでいいんでしょうか?親テーマはもうさわないという運用になるんでしょうか?おしえてください。AMこんにちわゆうさん!コメントありがとうございます。子テーマを作成したら、以降は基本子テーマを触っていく形になります。親テーマのバージョンアップがあったらテーマ作成者の指示に従ってバージョンアップしてください。できれば、バージョンアップでどのファイルが更新されたかを確認して、もし子テーマで編集しているファイルと重複していたら、バージョンアップされた親テーマのファイルを子テーマに移し、再度カスタマイズ部分を反映させる方法がベストです。AM返信ありがとうございます!勉強になりました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【癒しのジョシカツ】朝ヨガの会はじめます。【フリーランス限定】ウェブ制作合宿プラン作りました。暮らすGOMAってこんなことしてます。暮らすGOMA(ゴーマ)は、京都丹波と呼ばれる南丹市日吉町胡麻にある、里山をベースとした遊びのある新しい暮らしのあり方を提案するプロジェクトチーム。主軸は、サイクリングツアー(遊ぶ)、Web制作(働く)、移住体験(暮らす)の3サービス。僕たちに会いに来てください。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。www.goma.life【GOMAサイクリングツアー】GOMAと一緒に走りましょう。GOMAサイクリングツアー│京都の里山を走ろうGOMAサイクリングツアーは京都の里山を楽しむ体験型アクティビティ。初心者歓迎、ツアー詳細、ご予約はこちらから。【癒しのジョシカツ】朝ヨガの会はじめます。【フリーランス限定】ウェブ制作合宿プラン作りました。暮らすGOMAってこんなことしてます。暮らすGOMA(ゴーマ)は、京都丹波と呼ばれる南丹市日吉町胡麻にある、里山をベースとした遊びのある新しい暮らしのあり方を提案するプロジェクトチーム。主軸は、サイクリングツアー(遊ぶ)、Web制作(働く)、移住体験(暮らす)の3サービス。僕たちに会いに来てください。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。www.goma.life【GOMAサイクリングツアー】GOMAと一緒に走りましょう。GOMAサイクリングツアー│京都の里山を走ろうGOMAサイクリングツアーは京都の里山を楽しむ体験型アクティビティ。初心者歓迎、ツアー詳細、ご予約はこちらから。初心者向け子育て田舎暮らし。