無料テーマtwentyseventeenの子テーマ作成、アップしました

はじめてのクライアント様・ワードプレスで「管理者」権限を与えてもらいました。

住まいが遠いため、しばらく管理権限をお借りして、私自身の自宅で「公開」までの作業を行おうと思います。

住宅展示場ですと新しいおうちの建物を「遠隔」で準備をすることはおそらく不可能ですが、ワードプレス設置の場合は一時的に管理権限を与えてもらうことにより、作業を代行することができます。

この記事では無料テーマ「twentyseventeen」の子テーマ作成、そしてアップロード作業の様子をまとめてみます。

2017年、新しいテーマです^^!

twentyseventeenの子テーマをつくります

「元となる子ファイル」を1つとっておくと便利です。

ワードプレス授業を受けて、

無料テーマ「first」の子テーマ

・「first-child」

を作成しました。

「フォルダ」に2つのファイル(.phpと.css)が入っています

「first-child」フォルダをコピペします(2つめ)

「first-childのコピー」という名前のフォルダができました!

(「first-child2」という名前のができる人もいるかもしれません。PCの設定によります)

「twentyseventeen-child」というフォルダ名に書きかえます

つくりたいのは「twentyseventeen」の子テーマですので

・「first-child」というフォルダ名を

・「twentyseventeen-child」

というフォルダ名にかきかえます

「twentyseventeen」はワードプレステーマ管理画面にもともと入っています。

ダウンロード&アップロードの必要はないのですが、テーマ名を「コピペ」したいため、自分のデスクトップにダウンロードしてみました。

デスクトップにきてくれました

「twentyseventeen」の配布ページを表示して、「twentyseventeen」の部分からスペルをコピペさせてもらう方法もあるかもしれません。

ダウンロードしたフォルダからコピペするやり方は!?

・「twentyseventeen」をコピー(クリック、右クリックで名前を変更、反転させてコピー。パソコン設定による)

・「first-childのコピー」のフォルダ名を右クリック、「first」を消す(「-child」は残す)、さっきコピーした「新しい名前」(twentyseventeen)を左側に貼りつけ

フォルダ名のコピペ、かきかえは少々やりにくいので、メモ帳の文字でコピペの練習をしてみるとコツがつかめます。

*手入力で一文字ずつ書き入れてもいいのですが、長いスペルではどうしてもミスがでます。

「first」くらい簡単なスペルなら手でかいてもいいかもですが、twentyseventeenではなるべく「コピペ」するのが成功のコツです。

新「twentyseventeen-child」中身をかくにんします

「functions.php」「style.css」というファイルがはいっています。

・「functions.php」はどのテーマでも記載が同じでいいので、いじらないでそのままつかいます

・「style.css」4行の記載(実質上は2行分。2〜3行目)を、少しかきかえます

短いです。

「style.css」の中身を書きかえます

新・子テーマ「twentyseventeen-child」にはいっている「style.css」の記載はつぎのようになっています

/*
Theme Name: first-child
Template: first
*/

・「first」をバックスペース、deleteなどで1文字ずつけずり(範囲指定して消してもいいです)

・「twentyseventeen」をダウンロード元のフォルダ名などからコピペして連れてきて、2行目と3行目に貼り付けます

図解します

「first」とかいてある2行目、3行目をつかいたいテーマ名「twentyseventeen」にかきなおします

けずって

コピペ

コピペ

/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/

「twentyseventeen」かきかえできたら、忘れずに「保存」します。

テキストエディタの「ファイル」内からできると思います。

ところでテキストエディタは何を使うの!?

わたし自身はプログラマー・エンジニア志望でmacパソコンを入手してみました。

プログラミングコード、html、cssは「Atom」というテキストエディタで読み・書きしています。

Windowsユーザーの方が一般的だと思います。

以前ホームページ(静的プログラミングでhtml,cssまで)のコードをかいたときには

・メモ帳

をつかっていました

ウィンドウズに元々はいっています

「さくらエディタ」「TeraPad」という無料ソフトをつかったこともあります。

配布サイトへ行ってダウンロードさせてもらいます(無料のワードプレステーマも同じ方法でもらってきます)

windowsユーザーでプログラムコードをかく人がAtomを使ってるか上のをつかっているかわかりません。

windowsでもAtomはつかえるらしいです。

よいエディタは文字の読み違えがなくて読みやすく、改行がヘンになったりしません。

ワードプレスサイトをもつ場合には、有名なエディタの扱いに少しなれておくと便利です。

話を「子テーマ」に戻します。

「twentysevevteen-child」フォルダ(中にファイル2つ)できあがっていると思います。

子テーマ「twentysevevteen-child」zipに圧縮します

自分のワードプレスに子テーマ「twentysevevteen-child」をアップロードするため「圧縮」します。

圧縮ファイル形式は「zip」でつくります。

こんな風に「はなれたところ」にzipファイルができてしまう場合もあります。

ウィンドウズの場合は別フォルダに入ってしまっているなど。

「検索」でPC内を探してみるのもよさそうです。

「(親)テーマ」「子テーマ」アップロードします

・「twentysevevteen」 親テーマ(twentysevevteen.zip)

・「twentysevevteen-child」 子テーマ(twentysevevteen-child.zip)

「外観」>テーマ>新規追加からアップロードします。

テーマのアップロード

「ファイルを選択」をクリックすると

デスクトップにあるファイルが表示されますでしょうか

「twentyseventeen-child.zip」を「選択」します(ボタン)

「今すぐインストール」

真ん中の「有効化」クリック

これで終了です

「子テーマ」の方が「有効」になっています。

「twentyseventeen-child」です

写真もなにもありませんが、この状態でよいのです。

(注!)テーマ・アップロード作業まとめ

・「親テーマ」アップロード、そして「有効化」

・「子テーマ」アップロード、そして「有効化」

します

子テーマ単独だけ「アップロード&有効化」しても使えません。

親テーマ、そして子テーマ両方インストール・有効化しないといけません。

親子どちらも「zip」フォルダでデスクトップにでも用意しておきましょう。

「子テーマ」が効いているかどうかテストします

アップロードした子テーマ「twentyseventeen-child」がちゃんと効いてくれるのかどうか、適当な指示をいれてテストします

現在、トップページの文字色は「黒」です。

「外観」>テーマの編集にいきます

「注意!」という警告画面がでます

かきかえしてへんてこりんだったら、「更新」おしたあと画面まっしろになって直せなくなるかもよ、のような「警告」です。

(たしかにへんてこりんな指示をかくと動作そのものがオカシクなることもあるようです)

注意深く編集するとして「確認しました」ボタン(ブルーで進む方)をクリックします。

4行でてきます。

先ほど自分が書き直した「子テーマ」style.cssの「中身」がでてきます。

4行目までかいてあるので「5行目」に書き足しをしてみます。

5行目に次のように書きいれてみます。

p { color : red; }

本文の文字色を「赤」にして、という指定です。

「ファイルを保存」します。

(「;」忘れなどミスがあると、バツがついて知らせてくれます)

トップページで文字色の変化をみます

黒い文字だったページです

本文の文字色が「赤く」なっていたらいいのですが・・・

↓↓↓

文字色は「赤く」なりました!成功です。

子テーマがちゃんとつかえています。

まとめ:表示テストがおわったので文字色を戻します

5行目 p { color : red; } を削って「ファイルを保存」おします

文字色が黒く戻ります

これで子テーマの作成、アップロードが完了しました

色、大きさなどいろんなスタイル指定ができるのですが、その記入の仕方は別な記事にゆずります。