WordPressのテーマTwenty Seventeenで子テーマを作った一覧

4月20日にWordPress4.7.4が公開されTwenty Seventeenも4月18日にVersion upの更新情報が届いてましたね。

さっそくWordPressと私が使っているTwenty Seventeenのテーマを最新バージョンに更新しました。

実は、このフォルダ階層でちょとはまりましたので記載します。

1.子テーマを作るときのフォルダ階層一覧

 

まず、FFFTPソフトでサーバーにアクセスするとご自分のドメインがあります。これがWordPressをインストールしたディレクトリです。

※フォルダの作成方法がわからない方はWordPress初心者向け「Twenty Seventeen子テーマの作り方」で紹介してますので参考にしてください。

1-1.Twenty Seventeen-childのフォルダを作る

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」の順にタブルクリックします。

 

twentyseventeenのフォルダが表示されている状態でtwentyseventeen-childをつくります。

 

1-2.template-partsのフォルダとfooterのフォルダを作る

・twentyseventeen-childのフォルダをダブルクリックしてこの中に「template-parts」のフォルダを作ります。

・次にtemplate-partsをダブルクリックし「footer」のフォルダを作ります

これでフォルダ作成は終わりましたので次にファイルを作ります。

 

2.Twenty Seventeen-child子テーマのファイルを作る

前回の記事でも紹介しましたが、今回は、一覧として表示したいと思います。

2-1.基本となるstyle.cssを作る

まず、スタイリストシートの必須項目となる部分を作ります。

その次に追加したい項目があればこの後に記途します。

私が子テーマのスタイリストシートに追加したのは、

2-1-1.リンク色とホバー色の変更

これは、親テーマのlinksの部分のみをコピーして下記のように加工したものです。

・リンク色の変更

①文字の色を黒【color; #222】→青【color: #0000FF;】に変更
②下線の色を黒【rgba(15, 15, 15, 1);】→青【rgba(0, 0, 255, 1);】に変更

・ホバー色の変更

①【color: #000;】をオレンジ【color: #FF8000;】のタグに変更。

②【rgba(0, 0, 0, 1)】 の部分を同様のカラータグ【255, 128, 0, 1】にします。

 

※この部分の変更はTwenty Seventeen のリンク色を変更する方法で詳しく記載しています。

ご自身に会う色で変更してください。

2-1-2.ページサイズを1200幅に変更

 

2-1-3.<h2>見出しの装飾

左に青の下線が入り見出しの背景に少し色を入れたパターンです。

↓   ↓


CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh2を選択する

②テキストモードで<h2>ここに文字を入れる</h2>

 

2-1-4.<h3>タグを使った見出しの装飾

下に青の下線が入ったタイプです。

 ↓   ↓

CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh3を選択する

②テキストで<h3>ここに文字を入れる</h3>

※保存場所は「twentyseventeen-child」フォルダの中です。

2-2.functions.phpを作る

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になったり、RSSなどうまく機能しなくなったりしますので気をつけてください。

※保存場所は「twentyseventeen-child」フォルダの中です。

 

2-3.header.phpを作る

HTMLタグ、Adsenseのコードなどを親テーマに入力している場合は親テーマのhwader.phpをコピーして子テーマに保存します。

※保存場所は「twentyseventeen-child」フォルダの中です。

2-4.site-info.phpを作る

フッターのproudly powered by wordpress表記をCopyright (C)にカスタマイズしたデータを保存する時に使用しますが、

元のデータは

 

となっており13~14行目を削除しこれをコピーライトに変更する時に使用します。

 

※このファイルの保存場所は、「twentyseventeen-child」→「template-parts」→「footer」のフォルダの中に「site-info.php」のファイルを保存してください。

次回は、タイトル見出しの装飾方法を子テーマを使用して解説します。

 

WordPress初心者向け「Twenty Seventeen子テーマの作り方」

先日、子テーマについて記載したのですが、本日は、子テーマの作成方法について記載したいと思います。

子テーマを何故作るのか?

 

親テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれませんが、子テーマを使用すれば親テーマがアップデートされても子テーマは確実に保持されますので、自分がカスタマイズした内容が保持できます。

 

1.子テーマの作り方

 

子テーマを作るのには、サーバーで直接作る方法とFFFTPソフトを使って作成する方法がありますが、今回はFFFTPソフトを使って作成する方法を記載します。

FFFTPソフトのイントール方法や初期設定がわからない方はsynclogue-navi.comさんに設定方法など記載がありますので参考にして下さい。

1-1.FFFTPソフトを使ってフォルダを作ります。

 

FFFTPソフトでサーバーに接続します。
WordPressがインストールされているフォルダをダブルクリック→「Public_html」→「wp-content」→「themes」の順にダブルクリックすると以下のフォルダーが表示されます。

 

上の画像表示の状態でFFFTPソフトのツールバーの中にあるフォルダ作成をクリック↓

 

ポップアップ画面に「twentyseventeen-child」と入力し「OKをクリック」

 

するとtwentyseventeenの下にtwentyseventeen-childのフォルダができます。

 

フォルダ作成はこれで完了です。

※子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されますが、必須ではありません。

1-2.子テーマを有効にするため最低限のファイルを作る

子テーマを有効にする為にはstile.cssfunctions.php

この2つのファイルが最低限必要です。

 

1-3.style.cssを作る

Search Console(旧:ウェブマスターツール)構造化エラーの対処方法でも記載しましたがSearch Consoleの構造化データーにエラーがでましたので

WordPress codex日本語版を参考にさせていただきました。

※style.cssに追加する場合以下のコードの後に記途してください。

 

Twenty Seventeen Version1.1をお使いの方でフォルダ名をtwentyseventeen-childと付けられた方は、

Theme URI: http://テーマのURL/
Author: 子テーマの作者名
Author URI: http://←テーマ作者のサイト

この3項目をご自分用に書きかえればOKです。

メモ帳に貼り付けて、ディスクトップなどわかりやすい場所に保存してください。

ファイルを保存する時の注意点
ファイル名・・「style.css」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

 

するとstyle.cssが下の画像のようにディスクトップにできているのが確認できます。

 

フォルダに保存した場合の画像

 

ディスクトップに保存した場合の画像

 

1-4.functions.phpを作る

functions.phpに、親テーマのスタイルシートを呼び出す記述を書き込みます。

※functions.phpに機能を追加する場合は、” ?> “の前に記途して下さい。

ファイルを保存するときの注意点
ファイル名・・「functions.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して「保存」

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になってしまいます。必ずバックアップを取って下さい。

 

フォルダに保存した場合の画像

ディスクトップに保存した場合の画像

2.ファイルをFFFTPソフトでアップロードする。

 

次に、作成したこの2つのファイルをFFFTPソフトを使ってアップロードしていきます。

・FFFTPソフトにサーバーに接続します。

・WordPressがインストールされているフォルダをダブルクリック→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」の順にダブルクリックします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)にstyle.cssとfunctions.phpのファイルをドラック&ドロップします。

 

ホスト側に下の画像のようにstyle.cssとfunctions.phpのファイルがアップロードされているのを確認します。

 

これでFFFTPソフトの使用は終わりです。
FFFTPソフトは使い終わったので閉じちゃってください。

これから最後の総仕上げ(^^♪もうちょっとだよ~!頑張って!!

 

3.子テーマを有効化する

Word Press にログインし、「外観」→「テーマ」の順にクリックします。

 
これで終わりです。参考にしていただければ幸いです。

WordPressでRSSフィードが出力できていない時に確認すること

alt"RSS検出できない時のRSSリスティング(フィードの自動検出はできませんでした)の画像"

にほんブログ村のブログランキングに参加しているのですが、更新した記事が記載されていない事を発見!!

にほんブログ村の登録時にRSSのフイードURLも登録したので、まさか?と思いRSSリスティングでフィード自動検出をしたところ「フィードの自動検出はできませんでした。」

と表示され、RSSの出力ができてない事を確認。

alt""

 

 

日本ブログ村に登録した後、私がした事といえば・・・

パーマリンクを変更し、Redirection(プラグイン)をインストール
子テーマを作り使用した。

以上の2項目のみ・・

Redirection(プラグイン)を停止しても変化なしそこで子テーマを親テーマに変更
すると見事RSSの出力ができました。

色々調べた結果functions.phpに必要のない改行やスペースがあるとRSSフィードが表示されないらしいです。

 

1.子テーマのfunctions.phpのコードを確認する

 

私の場合は以下のように子テーマでfunctions.phpコードを記途しました。

修正前↓

alt""

 

 

修正後↓

alt""

 

私の場合は子テーマを使っているので子テーマのfunctions.phpの改行を取り除きました。

注意:functions.phpは、編集を間違えると画面が真っ白になってしまいます。必ずバックアップを取って下さい。

 

最後までお読み頂きありがとうございます。