暮らしのハンドノート

2017年4月24日2021年1月23日

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

４月20日にWordPress4.7.4が公開されTwenty Seventeenも４月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を作る

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

/*
Theme Name: twentyseventeen-child
Theme URI: http://テーマのURL/
Description: twentyseventeen Child Theme
Author: 子テーマの作者名
Author URI: http://←テーマ作者のサイト
Template: twentyseventeen
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Text Domain: twentyseventeen-child
*/

Theme Name: twentyseventeen-child

Theme URI: http://テーマのURL/

Description: twentyseventeen Child Theme

Author: 子テーマの作者名

Author URI: http://←テーマ作者のサイト

Template: twentyseventeen

Version: 1.2

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

Text Domain: twentyseventeen-child

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

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

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】にします。

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	color: #0000ff;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba( 0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #FF8000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(255, 128, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

a {
	color: #0000FF;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #FF8000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba( 0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 128, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

/*--------------------------------------------------------------

10.0 Links

--------------------------------------------------------------*/

a {

color: #0000ff;

text-decoration: none;

}

a:focus {

outline: thin dotted;

}

a:hover,

a:active {

color: #000;

outline: 0;

}

/* Hover effects */

.entry-content a,

.entry-summary a,

.widget a,

.site-footer .widget-area a,

.posts-navigation a,

.widget_authors a strong {

-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-title a,

.entry-meta a,

.page-links a,

.page-links a .page-number,

.entry-footer a,

.entry-footer .cat-links a,

.entry-footer .tags-links a,

.edit-link a,

.post-navigation a,

.logged-in-as a,

.comment-navigation a,

.comment-metadata a,

.comment-metadata a.comment-edit-link,

.comment-reply-link,

a .nav-title,

.pagination a,

.comments-pagination a,

.site-info a,

.widget .widget-title a,

.widget ul li a,

.site-footer .widget-area ul li a,

.site-footer .widget-area ul li a {

-webkit-box-shadow: inset 0 -1px 0 rgba( 0, 0, 255, 1);

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);

text-decoration: none;

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-content a:focus,

.entry-content a:hover,

.entry-summary a:focus,

.entry-summary a:hover,

.widget a:focus,

.widget a:hover,

.site-footer .widget-area a:focus,

.site-footer .widget-area a:hover,

.posts-navigation a:focus,

.posts-navigation a:hover,

.comment-metadata a:focus,

.comment-metadata a:hover,

.comment-metadata a.comment-edit-link:focus,

.comment-metadata a.comment-edit-link:hover,

.comment-reply-link:focus,

.comment-reply-link:hover,

.widget_authors a:focus strong,

.widget_authors a:hover strong,

.entry-title a:focus,

.entry-title a:hover,

.entry-meta a:focus,

.entry-meta a:hover,

.page-links a:focus .page-number,

.page-links a:hover .page-number,

.entry-footer a:focus,

.entry-footer a:hover,

.entry-footer .cat-links a:focus,

.entry-footer .cat-links a:hover,

.entry-footer .tags-links a:focus,

.entry-footer .tags-links a:hover,

.post-navigation a:focus,

.post-navigation a:hover,

.pagination a:not(.prev):not(.next):focus,

.pagination a:not(.prev):not(.next):hover,

.comments-pagination a:not(.prev):not(.next):focus,

.comments-pagination a:not(.prev):not(.next):hover,

.logged-in-as a:focus,

.logged-in-as a:hover,

a:focus .nav-title,

a:hover .nav-title,

.edit-link a:focus,

.edit-link a:hover,

.site-info a:focus,

.site-info a:hover,

.widget .widget-title a:focus,

.widget .widget-title a:hover,

.widget ul li a:focus,

.widget ul li a:hover {

color: #FF8000;

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);

box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(255, 128, 0, 1);

}

/* Fixes linked images */

.entry-content a img,

.widget a img {

-webkit-box-shadow: 0 0 0 8px #fff;

box-shadow: 0 0 0 8px #fff;

}

.post-navigation a:focus .icon,

.post-navigation a:hover .icon {

color: #222;

}

a {

color: #0000FF;

text-decoration: none;

}

a:focus {

outline: thin dotted;

}

a:hover,

a:active {

color: #000;

outline: 0;

}

/* Hover effects */

.entry-content a,

.entry-summary a,

.widget a,

.site-footer .widget-area a,

.posts-navigation a,

.widget_authors a strong {

-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-title a,

.entry-meta a,

.page-links a,

.page-links a .page-number,

.entry-footer a,

.entry-footer .cat-links a,

.entry-footer .tags-links a,

.edit-link a,

.post-navigation a,

.logged-in-as a,

.comment-navigation a,

.comment-metadata a,

.comment-metadata a.comment-edit-link,

.comment-reply-link,

a .nav-title,

.pagination a,

.comments-pagination a,

.site-info a,

.widget .widget-title a,

.widget ul li a,

.site-footer .widget-area ul li a,

.site-footer .widget-area ul li a {

-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);

text-decoration: none;

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-content a:focus,

.entry-content a:hover,

.entry-summary a:focus,

.entry-summary a:hover,

.widget a:focus,

.widget a:hover,

.site-footer .widget-area a:focus,

.site-footer .widget-area a:hover,

.posts-navigation a:focus,

.posts-navigation a:hover,

.comment-metadata a:focus,

.comment-metadata a:hover,

.comment-metadata a.comment-edit-link:focus,

.comment-metadata a.comment-edit-link:hover,

.comment-reply-link:focus,

.comment-reply-link:hover,

.widget_authors a:focus strong,

.widget_authors a:hover strong,

.entry-title a:focus,

.entry-title a:hover,

.entry-meta a:focus,

.entry-meta a:hover,

.page-links a:focus .page-number,

.page-links a:hover .page-number,

.entry-footer a:focus,

.entry-footer a:hover,

.entry-footer .cat-links a:focus,

.entry-footer .cat-links a:hover,

.entry-footer .tags-links a:focus,

.entry-footer .tags-links a:hover,

.post-navigation a:focus,

.post-navigation a:hover,

.pagination a:not(.prev):not(.next):focus,

.pagination a:not(.prev):not(.next):hover,

.comments-pagination a:not(.prev):not(.next):focus,

.comments-pagination a:not(.prev):not(.next):hover,

.logged-in-as a:focus,

.logged-in-as a:hover,

a:focus .nav-title,

a:hover .nav-title,

.edit-link a:focus,

.edit-link a:hover,

.site-info a:focus,

.site-info a:hover,

.widget .widget-title a:focus,

.widget .widget-title a:hover,

.widget ul li a:focus,

.widget ul li a:hover {

color: #FF8000;

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba( 0, 0, 0, 1);

box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 128, 0, 1);

}

/* Fixes linked images */

.entry-content a img,

.widget a img {

-webkit-box-shadow: 0 0 0 8px #fff;

box-shadow: 0 0 0 8px #fff;

}

.post-navigation a:focus .icon,

.post-navigation a:hover .icon {

color: #222;

}

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

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

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

/*--------------------------------------------------------------
11.0 ページのサイズを1200に変更
--------------------------------------------------------------*/
@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1200px;/*記事・サイドバー・余白の全幅*/
		padding-left: 2em;/*記事の左余白*/
		padding-right: 2em;/*サイドバーの右余白*/
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;/*記事幅*/
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;/*サイドバー幅*/
	}
	.navigation-top .wrap {
		max-width: 1200px;/*メニューバー幅*/
		padding: 0.75em 3.4166666666667em;
	}
	.site-content {
		padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
	}
}

/*--------------------------------------------------------------

11.0 ページのサイズを1200に変更

--------------------------------------------------------------*/

@media screen and (min-width: 48em) {

.wrap {

max-width: 1200px;/*記事・サイドバー・余白の全幅*/

padding-left: 2em;/*記事の左余白*/

padding-right: 2em;/*サイドバーの右余白*/

}

.has-sidebar:not(.error404) #primary {

float: left;

width: 67%;/*記事幅*/

}

.has-sidebar #secondary {

float: right;

padding-top: 0;

width: 29%;/*サイドバー幅*/

}

.navigation-top .wrap {

max-width: 1200px;/*メニューバー幅*/

padding: 0.75em 3.4166666666667em;

}

.site-content {

padding: 2.5em 0 0;/*メニューバーと記事の間隔*/

}

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

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

↓　　　↓

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

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

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

.entry-content h2 {
 border-left: 5px solid #205a97;
 padding: 0 0 0 15px ;
 line-height: 2;
 font-size: 28px;
 background-color: #f6f6f6;}

.entry-content h2 {

border-left: 5px solid #205a97;

padding: 0 0 0 15px ;

line-height: 2;

font-size: 28px;

background-color: #f6f6f6;}

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

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

　↓　　　↓

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

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

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

.entry-content h3 {
 border-bottom: 2px solid #205a97;
 padding: 0 0 0 15px ;
 line-height: 2;
 font-size: 25px;
 background-color: #fff;}

.entry-content h3 {

border-bottom: 2px solid #205a97;

padding: 0 0 0 15px ;

line-height: 2;

font-size: 25px;

background-color: #fff;}

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

2-2.functions.phpを作る

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}
?>

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );

}

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

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

2-3.header.phpを作る

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

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
//ここにAdsenseのショートコードを入力
//Search ConsoleのHTML タグを入力
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

	<header id="masthead" class="site-header" role="banner">

		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

		<?php if ( has_nav_menu( 'top' ) ) : ?>
			<div class="navigation-top">
				<div class="wrap">
					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
				</div><!-- .wrap -->
			</div><!-- .navigation-top -->
		<?php endif; ?>

	</header><!-- #masthead -->

	<?php
	// If a regular post or page, and not the front page, show the featured image.
	if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
		echo '<div class="single-featured-image-header">';
		the_post_thumbnail( 'twentyseventeen-featured-image' );
		echo '</div><!-- .single-featured-image-header -->';
	endif;
	?>

	<div class="site-content-contain">
		<div id="content" class="site-content">

<?php

/**

* The header for our theme

* This is the template that displays all of the <head> section and everything up until <div id="content">

* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

?><!DOCTYPE html>

<html <?php language_attributes(); ?> class="no-js no-svg">

<head>

//ここにAdsenseのショートコードを入力

//Search ConsoleのHTML タグを入力

<?php wp_head(); ?>

</head>

<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

<?php if ( has_nav_menu( 'top' ) ) : ?>

<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>

</div>

</div>

<?php endif; ?>

</header>

<?php

// If a regular post or page, and not the front page, show the featured image.

if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :

echo '<div class="single-featured-image-header">';

the_post_thumbnail( 'twentyseventeen-featured-image' );

echo '</div>';

endif;

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

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

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

元のデータは

<?php
/**
* Displays footer site info
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/

?>
<div class=”site-info”>
　<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’, 
‘twentyseventeen’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ ); ?></a>
</div><!– .site-info –>

<?php

/**

* Displays footer site info

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

　<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’,

‘twentyseventeen’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ ); ?></a>

</div><!– .site-info –>

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

<?php
/**
 * Displays footer site info
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<div class="site-info">
	Copyright (C) <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( '暮らしのハンドノート', 'display' ) ); ?>" rel="home"><?php bloginfo( '暮らしのハンドノート' ); ?> </a>All Rights Reserved.
</div><!-- .site-info -->

<?php

/**

* Displays footer site info

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

</div>

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

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

2017年4月20日2018年5月25日

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.cssとfunctions.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://←テーマ作者のサイト

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

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

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

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

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

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

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

↓

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

↓

1-4.functions.phpを作る

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

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}
?>

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );

}

※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 にログインし、「外観」→「テーマ」の順にクリックします。

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

2017年4月17日2018年5月3日

Search Console(旧:ウェブマスターツール)構造化エラーの対処方法

hatomとhentryが何故か続出・・・

その時のSearch Consoleの構造化データーは下記画像の通りでした。

１．hatom（マークアップ: microformats.org）

Search Consoleの構造化データをクリックするとたくさんauthorがありませんとされてました。

エラーが出ているところをクリックし「ライブデーターをテスト」をおすと↓

構造化データーが出てきます↓
hatomの警告とエラーは表示されませんがhentryの部分が空白表示になってます。

1-1.hentryエラーの修正方法

私は、WordPress Twenty Seventeenのテーマを使用していて、子テーマを使っているのですが、子テーマのスタイリストシート(style.css)に

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

と記途していました。

これを下記のようにカスタマイズするとhatomのエラーはなくなりました。

修正後の構造化データは↓

２．hentry（マークアップ: microformats.org)

のエラーが出た時の確認方法です。

構造化データの赤色で囲ってある下のhentryをクリックします。

hentryのエラーのページが表示されますのでエラー表示されている部分をクリックします↓

「ライブデータをテスト」をクリックします↓

赤色で囲ってある部分の下のArticleとをクリックすると↓

たくさんのエラーが出ています。

もうこれでは、沢山のエラーがあり過ぎて↓

困り果てた私は・・・

プラグインを探してみました。すると・・・

なんかよさげなプラグインを発見!!これだとWordPressのバージョンのアップデートがあった時にも個別に対処しないでよさそうなのでインストールしてみました。

いつものように管理画面の「プラグイン」→「新規追加」→検索窓に「Hatom」と入力し検索→インストール

次に有効化をクリックこれで↓

これでしばらく様子を見てみたいと思います。
しばらくたって変化があれば、また投稿しますね。

最後に、Search Consoleの構造化データを改善するとseo効果も期待されますので、確認してみてくださいね。

2018.5.3追記します。

先日、Zero Cool さんから問い合わせ頂き再度見直したところ、以前たくさん出てたwordpressのﾍﾟｰｼﾞのエラーの中身は・・・

↓　　↓　　↓　

こんなに綺麗になってました。

プラグインの効果は大ですね(*^^*)

でも、思いっきりアホな私は、画像のファイル名を日本語にしてたので、こんなエラーが沢山・・・かなりトホホです^^;

2017年4月16日2017年5月24日

2017年4月8日GoogleAdSense申請時点でのAdSense のご利用条件

2017年4月8日に申請し、一度は、不十分なコンテンツということで承認されませんでしたが、修正をし、再度申請した結果2017年4月11日に承認になりました!

その時点でのご利用条件等を記載しますので、これからAdSenseに申し込みをしようと考えられている方はAdSenseの条件とウェブマスター向けの品質に関するガイドライン等を確認してみてくださいね。

おっと!! 申し込みの前にまず、ドメインの取得は必須です。

サブドメインもNGですので気をつけてくださいね。

日本語ドメインをお使いの方はpunycodeに変換して申請して下さい。

１．自分のサイトが AdSense のご利用条件を満たしているか確認する

1-1.他にはない魅力があるか

サイトに独自の魅力があるか。

独自のテキストや画像などのことを表してあり、特に、要素となる部分を魅力的に配置を考えたりして独自のレイアウトを作り、ユーザーが求めている情報を簡単に参照できるようにする。

サイトを効果的に構成する方法については、ユーザーの利便性に関するガイドラインを参照してください。

また、AdSenseでは、コメント欄を用意するのも効果的とされていますがですがコメント欄の設置には、AdSense のプログラムポリシーに従い、不適切なコメントが投稿されないように管理をしてください。詳細については、ユーザー作成コンテンツの詳細と管理方法をご覧になってください。

私は、スパムコメントが多くて困っていたので、Throws SPAM Awayのプラグインをインストールしてましたのでよかったのかもしれません。このコメントスパムの件はウェブマスター向けの品質によるガイドラインの中にコメントスパムを防止する方法が書いてありますので参考にして下さい。

1-2.操作が簡単でわかりやすくなっているか

メニューバーはAdSenseでは、特に重要な要素とされています。下記画像の赤い枠で囲った部分のことです。

1-3.興味を引く独自のコンテンツがあるか

専門的な知識を生かしたコンテンツや自分のアイデアなどオリジナリティーのある独自のコンテンツを搭載する。

注意:コンテンツポリシーで定められているように、AdSense 広告は、独自性がないコンテンツや著作権で保護されたコンテンツを引用し、掲載しているサイトは禁止なので表示できません。

２．禁止コンテンツ

AdSeneで禁止されているコンテンツがないか再度チェックをしましょう!

アダルトコンテンツ
 個人、集団、組織を誹謗中傷するコンテンツ
 危険ドラッグおよび薬物に関連したコンテンツ
 アルコールに関連したコンテンツ
 タバコに関連したコンテンツ
 ヘルスケアに関連したコンテンツ
 ハッキング、クラッキングに関連したコンテンツ
 報酬プログラムを提供するページ
 不適切な表示に関連したコンテンツ
 暴力的なコンテンツ
 武器および兵器に関連したコンテンツ
 不正行為を助長するコンテンツ
 違法なコンテンツ