WordPressテーマの作り方

WordPressテーマの作り方を紹介しています。
まず、全体を仮完成させて、その後、細部を作りこんでいきます。

---

Underscoresについて

「Underscores」をベースにして、WordPressテーマを制作します。

Underscoresとは

• Automattic社が開発しています。

• _s とも表記されます。

• スターターテーマ、ブランクテーマです。

• ガイドラインに沿った標準的なテーマ制作が可能です。

• 開発時間の大幅な短縮が可能です。

• 本格的なテーマ制作が可能です。

---

シンプルなブログテーマの作り方

1. Underscoresのダウンロード

1. Underscoresの公式サイトにアクセスします。

2. 好きなテーマ名を入力して、GENERATEボタンを押します。

3. ここではテーマ名をSampleとします。

4. ダウンロードしたsample.zipファイルを解凍します。

2. style.cssにコードを追加

テーマ内のstyle.cssファイルの最下部に以下のコードをコピペします。

/* ----------------------------------------------------------------------
	# Sample
---------------------------------------------------------------------- */
body {
	position: relative;
	overflow-x: hidden;
	background: #f7fbff;
	margin: 0;
	text-align: left;
	font-size: 1.0rem;
	line-height: 1.8;
	font-weight: normal;
	color: #334466;
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Yu Gothic', '游ゴシック Medium', sans-serif;
	font-weight: 500;
}
/* Header */
.site-header {
	padding: 50px 0;
	width: 100% !important;
}
.site-branding { padding: 20px 0; }
/* Entry */
.entry-meta { padding: 20px 0;}
.entry-meta .posted-on,
.entry-meta entry-date.published,
.entry-meta entry-date.updated,
.entry-meta entry-date.byline { padding: 20px 10px 20px 0; }
.entry-footer .cat-links,
.entry-footer .tags-links,
.entry-footer .comments-link { padding: 20px 10px 20px 0; }
/* Menu */
.main-navigation {
	padding: 30px;
	background: #ffffff;
	width: 100%;
}
.main-navigation ul li {
	padding: 0 20px;
	display: block;
	float: none;
}
.main-navigation ul li a {
	display: block;
	float: none;
}
.main-navigation ul ul {
	display: block;
	float: none;
	padding: 30px;
	background: #ffffff;
}
.main-navigation ul ul li {
	padding: 10px;
}
/* Mobile Menu */
@media screen and (min-width: 992px) {
.menu-toggle { display: none; }
.main-navigation ul { display: flex; }
}
@media screen and (max-width: 991px) {
.main-navigation { background: rgba(255,255,255,0); }
.menu-toggle { display: block; }
.main-navigation ul { display: none; }
}
/* Layout */
.site {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background: #f7fbff;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
@media (min-width: 576px) {
.site { max-width: 540px; }
}
@media (min-width: 768px) {
.site { max-width: 720px; }
}
@media (min-width: 992px) {
.site { max-width: 960px; }
}
@media (min-width: 1200px) {
.site { max-width: 1140px; }
}
.site-main {
	position: relative;
	width: 100%;
	min-height: 1px;
	background: #f7fbff;
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.site-main article {
	background: white;
	padding: 50px;
	margin-bottom: 50px;
}
.widget-area {
	position: relative;
	width: 100%;
	min-height: 1px;
	background: #f7fbff;
	padding: 0 30px 50px;
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.widget-area .widget ul {
	padding: 20px;
	margin: 0;
}
@media (max-width: 992px) {
.site-main {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
.widget-area { display: block; }
}
/* Page */
.page .site-main {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
.page .widget-area { display: none; }

3. page.phpから一行を削除

固定ページでサイドバーを表示しないようにします。
テーマ内のpage.phpファイルから以下の1行を削除します。

get_sidebar();

4. シンプルなブログテーマの完成

基本的な機能を備えたブログテーマの完成です。
投稿ページ、固定ページ、アーカイブページ、メニュー、モバイルメニューも機能します。

---

元記事はこちらです

WordPressテーマの作り方