WordPress子テーマの作成とアップロード(誰にでもできる超簡単な方法)

Pocket

 

ワードプレスはサイトやブログを運営するのにとても便利で優れたサービスだと思う

専門的知識がほとんどなくとも独自ドメイン&有料レンタルサーバーを使っってオリジナリティのあるものに育てていける

そんな中で、“子テーマ” を使って独自にカスタマイズしていける

ワードプレスで運営してる人なら聞いたことくらいはあると思う

これからサイトやブログを活用しようと思っている方にもすぐにできる方法なので共有したいと思います

今回はその “子テーマの簡単な作り方” についてです

child theme

〜〜項目〜〜〜〜〜

❤︎1、ってか子テーマって何?について

❤︎2、子テーマに必要なファイルを先に用意する

❤︎3、子テーマをワードプレスダッシュボードから直接アップロードする

〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

 

❤︎1、ってか子テーマって何?について

一応書きますね…

ワードプレスはデザインをかなり自由にカスタマイズできます

基本は無料のテンプレ(テーマ)を使ってそれをいじってかなりカスタマイズしてくことができる

そこがワードプレスの魅力の1つでもあると思う

でもセキュリティの面ではシステムの更新、バージョンの更新などはしっかりして管理しないといけない

 

テンプレ(テーマ) の更新も必要です

そうすると個人でカスタマイズ(編集)した部分は元に戻ってしまう

その度にいちいちカスタマイズし直すなんて面倒でやってられませんよね笑

 

そこで  “子テーマ” という元祖のテーマを引き継ぎつつ、カスタマイズしたもの(こテーマ)を表示させる

という方法を使います

 

下図のように、テンプレ(テーマ)自体は子テーマの方に設定しておきつつ、元祖のテーマの内容、基礎になる内容をインポートして子テーマでは編集した部分のみを担当する

という方法です

View

 

そうすれば編集した子テーマ部分のみの内容は生かされたまま、テーマは最新の状態を保てる

つまり、

更新しても編集した部分は変わらず生かされ、編集し直す必要はない

だから、ワードプレスでデザインを編集する場合(ファイル内でのHTML、CSSで編集する必要があるカスタマイズ) は、子テーマで編集しておいた方が圧倒的に楽

という仕組みです

デフォルトのまま使うことも当然可能だし、今ではデフォでも素晴らしいテーマが無数にあるので、ファイルでのカスタマイズはしない というのもアリだと思うけど

ある程度編集する必要があるテーマを使っている方は ”子テーマ” が便利

そしてそんなに難しくはないので覚えておいて損はない

 

 

❤︎2、子テーマに必要なファイルを先に用意する

ということでまずは子テーマにするファイルを作成する

子テーマで最低限必要なのは style.css  というファイル

 

ファイルはWinの場合、TeraPad、UnEditorなどが無料で便利

MacではAtom,Mi とかでしょうか….

それらで取り合えあず “style.css” ファイルを作成しておく

 

例) Twenty Fifteen の子テーマを作成したい場合

/*
Theme Name:twentyfifteen_child
Template:twentyfifteen
*/

@import url('../twentyfifteen/style.css');

/* 以降に変更したいスタイルのみを追記していく */

 

Theme Nameが子テーマのファイル名で、今回はわかりやすく定番の〇〇child にしてみました

 

ここで注意点ですが、

※コロンとコロンの前後は半角、テーマ名も小文字でスペースなしで書く

余計なスペースや、日本語、はNGでファイルを認識できなかったり、壊れたりします

他、記号は使えないものが多い

_と-は使えるっぽい

半角スペースを入れるとエックスサーバーではファイルマネージャーからは確認できなくなったり削除できなくなったりします

さくらのサーバでもファイル壊れたりします

 

なのでスペース、日本語、大文字、特殊記号等は使わない….

 

Templateは、元祖テーマ(親テーマ)の名前を記入

@import url のかっこ内のも親テーマの名前を入れる

 

で、これを  style.css で保存

style css fail

 

子テーマに最低限必要なファイルはこれだけ これだけですw

このファイルをワープレにアップロードしたら、cssの編集はこれに足していけばいいだけw

 

あと、例えば content.php のファイルを編集したいとか single.phpを編集したいとかも先々いろいろ出てくると思う

その場合は親テーマのファイルの内容をコピーしてPCに一度保存し、それを編集してそのファイルを子テーマフォルダ内にサーバーのファイルマネージャーからアップロドしていけばOK

アップロードはサーバーのファイルマネージャーからもできる

その方法はまたこの次書きますw

 

そして子テーマでの編集でもう一つ気をつけたい点は、

functions.phpファイル”での編集についてです

“functions.phpファイル” はちょっ他のファイルと扱いが違い、注意が必要なので、知識のない方、初心者の方はこのファイルは触らない方がいい

 

 

❤︎3、子テーマをワードプレス管理画面から直接アップロードする

通常はFTPソフト(ファイル転送ソフト)を使ってアップロードする方が多いと思うのですが、

ワードプレスのダッシュボードからも直接アップロードできる

また、上記で軽く触れたとおり、サーバー(エックスサーバー さくらのレンタルサーバ スタンダード)のファイルマネージャーからも直接アップロードできる

 

やり方は超簡単です

今回はワードプレスのダッシュボードから直接アップロードする方法を書きます

 

まず、先ほど作ったファイルをzipに圧縮する

圧縮したいファイルを、右クリックで圧縮を選択するだけ

zip he comp

 

下図のように圧縮zipファイルができる

zip comp

 

それを

ワードプレスのダッシュボード>外観>新規追加と進み、

 

テーマのアップロードをクリック

 

 

ファイルを選択をクリック

fail sentaku

 

 

アップロードするファイル(Zipファイル)を選択

sentaku

 

今すぐインストールをクリック

install

 

ここでまた注意点ですが、

インストール中や更新中はページを変えたり絶対しないこと

下図のように、完了しましたの表示が出るまで触ってはダメです

 

これはプラグインのインストールや更新の時も同じです

もし途中でページを変えてしまうとダッシュボードじたいが開けなくなってしまうw

 

修復はできますが、またひと手間かかってしまうのでご注意をばw

急いでるとついフライングしちゃうんですよね笑

 

で、上記の表示になったら、OK

 

ちゃんとテーマとして認識されていれば成功です

theme child kakunin

 

あとは子テーマを有効化して確認しながらその子テーマ内で編集していきます

この段階で一度ファイルマネージャーから覗いてみて認識、表示されてるかも確認しておくと良い
(ワープレのテーマには反映してるけどサーバーのファイルマネージャーでは表示されてない場合などもある→フォルダ名が半角スペース使ってたりなどあるとうまく認識、表示されない、または削除できないなどある)

 

あ、上記の子テーマのフォルダは半角スペースありますが、ない方が良いですw

私も後で直しました

 

 

私も子テーマを実際作ってみたのは2年くらい前で、ワードプレスは全くの初心者の時でした

でもそんな頃からとりあえず子テーマでなんとかしとくことで、少しづつわかることが増えきいきます

いきなりガンガン編集する必要もないし、デザインカスタマイズ自体興味ない方もいると思うのですが、

見かけのかっこよさだけではなく、構造上直したくなる部分って出てくるし、自分がこれじゃ不便と感じて直したくなる部分って出てきたりする

そこを直すのに内部で編集しなければできないことだとすると、やはり “子テーマ” を使える方が後々楽になります

なのでとりあえずチャレンジしてみるのもいいと思う

なんか実験できるサイトでやってみるのもいいかも笑

遊び実験サイトw

私はそうしてます

 

あとはローカルに同じ環境を作っていじりまくってみるのもいいかもしれない

でも一番簡単でわかり易いのが同じサーバー上での環境で試すことだと思っている

使ってるサーバーによって起こる不具合や現象は変わったりもしてそれがまた別の作業のヒントになったりもする

もちろんびっくりするほど失敗して果てしのない旅になったりもしますがね 笑

アーティストの独自ドメインサイトやブログ構築についても参照

 

以上現場からお伝えしましたw

ってことで楽しいワードプレスライフをば!

しゃらんるわあああぁあ❤︎

 

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤Twitter, Facebook, G+, Feedly にて当サイト更新情報配信中です
宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

 Twitter   asset.f.logo.lg   btn_g_red_normal.png-34

follow us in feedly

 

関連コンテンツ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

thirteen − two =