FTPソフトとテキストエディタなしで子テーマを作ってカスタマイズする方法

毎月行っている八王子WordPressもくもく会やプライベートでもWordPressについて相談されることが多くなってきました。中でも今までblogサイトに書き込むだけだった人が自分のドメインを取得してWordPressでblogを作りたいというケースが多いようです。
そんなときに困るのは今までWeb制作の人などなら普通にFTPソフトや、エディタなどを使っていますが、いろいろなことをまだ知らない状態の人にFTPやエディタについてまず分かってもらうということになると道のりが遠くなってしまいます。
ということでFTPソフトやテキストエディタなしで子テーマを作ってカスタマイズする方法について書いてみます。

子テーマメーカーをインストールして子テーマを作る

以前、子テーマを作るプラグインを作りました。

WordPressでサイトを構築するとき、私の場合はほぼ必ず子テーマを作ってその中をカスタマイズしています。作るときに作り方を忘れて、親テーマを丸ごとコピーしてしまったり、子テ

この子テーマメーカーを使えば、FTP無しでも子テーマを作ることができます。

この記事の、

この部分を探して こちら をクリックしてファイルを保存します。このプラグインをサイトにインストールします。

ダッシュボード プラグイン>新規追加 をクリック



プラグインのアップロード
 をクリックして

ダウンロードした child-theme-maker.zip を指定して、



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



プラグインを有効化 
をクリックします。

子テーマメーカーがインストールされました。

子テーマメーカーで子テーマを作る

ダッシュボード 設定>Child Theme Maker をクリック

この画面が出るので

親テーマ名子テーマ名を入力して 送信 をクリック

ダッシュボード 外観>テーマ をクリックすると

このように twentyfourteen-child が作成されています

twentyfourteen-child を有効化します。

この状態でサイトを表示すると、twentyfourteenと全く同じテーマで表示されています。

これをカスタマイズしてみたいと思います。

子テーマのstyle.cssをカスタマイズする

style.cssのカスタマイズをしてみようと思います。

この記事で書いたカスタマイズをします。

このコードをコピーします。矢印のコピーマークをクリックすると、

コードが選択済みになるので コピー します。

子テーマのstyle.css
をカスタマイズするには、

ダッシュボード 外観>テーマの編集 をクリック

このように、子テーマの style.css が表示されます。

コピーしたコードを貼り付けて ファイルを更新 をクリックします

表画面を確認してみます

コンテンツエリアの幅が拡がりました(^^)/

子テーマのfunctions.phpをカスタマイズする

次に子テーマのfunctions.phpをカスタマイズしてみます。

functions.phpに自分でショートコードを書くこともあるのですが、そのたびにちょっと作り方を忘れてしまいます。今回は自分への備忘録も兼ねて「簡単にさくっとショートコード

ここで行ったカスタマイズをしてみましょう。この記事の

このコードを先ほどと同じ方法でコピーしておきます。

ダッシュボード 外観>テーマの編集 をクリックし



functions.php
 をクリック

このように内容が表示されます。

コピーしたコードを貼り付けて ファイルを更新 をクリックします。

ショートコードが使ってみます。最初に入っていた投稿の編集画面のテキストタブ

このようにショートコードを指定します。記事を見てみると、

このようにphpinfoが表示されて、functions.phpに施したカスタマイズがちゃんと動いていることが分かります(^^)/

まとめ:WordPressのダッシュボードだけでほぼカスタマイズはできるようですね

今までずっとこのblog記事をかいていたときも「ファイルをサーバーにアップロードして」とか「エディタでファイルを開いて」とか書いていましたが、初心者の方にとってはその辺がすでに理解の範囲外だったのかもしれませんm(_ _)m。

今回自分では初めて(^_^;、ダッシュボードだけでカスタマイズをしてみて できるんだ~! ということを改めて知りました。

[Amazon sponsored link] WordPressデザイン 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る