WordPress Theme

WordPress Theme

皆さんこにちはこんばんは!ロト君です。今回はWordPress Themeについて記載したいと思います。自作テーマは意外と簡単に作れるので一緒に作ってみましょう!!

1.自作テーマのメリット・デメリット

自作テーマを作るにあたってメリットとデメリットの補足をしたいと思います。

基本的にはメリットが多いのかなと思いますがデメリットもあるので記載します。

1-1.メリット

メリットとして下記のモノがあるかと思います。

  • テーマ(スキン)が自作出来る為、オリジナルの見た目がデザイン出来る。
  • プラグインによって使いたい機能を別途追加出来る。
  • WordPressの知識が増える。

こんな感じですかね。一般的に自作テーマを作れば、凝ったデザインも自分なりに出来るのでオススメします。

1-2.デメリット

デメリットは下記のモノです。

  • 一から自分で作らないといけない。
  • WordPressの知識が必要になる。
  • HTML5やCSS3・JS・PHPの知識も必要になる。

こんな感じです。

2.今回自分が考えたテーマレイアウト

色々と難しいところもありますが、そこを潜っての楽しみもあるので張り切って行ってみましょう!

今回作ったテーマレイアウトはこんな感じ。

テーマレイアウト

とてもシンプルな形としています。

2-1.header.php

header.phpはこんな感じです。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<?php wp_head(); ?>
</head>
<body <?php body_class( 'body_box' ); ?>>
	<header class="header_box">
		<div class="header_inner">

			<?php if( ! empty( get_header_image() ) ) : ?>
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
					<img class="logo_img" src="<?php header_image(); ?>">
				</a>
			<?php endif; ?>

		</div>
	</header>

上記ではheaderタグ内にheader_innerのクラスを付けてheaderとheader_innerを分けた形としています。

これをすることによって、headerは最大幅で表示し、header_innerは中央にmarginかけて配置する事が出来ます。

2-2.footer.php

footer.phpもこんな感じです。

<footer class="footer_box">
	<div class="footer_inner">

		<div class="copyright_inner">
			<p>
				© 2016 - <?php the_time( 'Y' ); ?> <?php bloginfo( 'name' ); ?>
			</p>
		</div>
		
	</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

header.php同様。footerとfooter_innerに分けています。

header_innerとfooter_innerは同じ幅でmarginかけると見た目良く、中央に表示出来ます。

2-3.index.php

index.phpはこんな感じです。

<?php get_header(); ?>
	
	<main class="main_box">
		<div class="main_inner">

			<section class="content_box"></section>

			<section class="sidebar_box"></section>
			
		</div>
	</main>

<?php get_footer(); ?>

index.phpは、main_innerで括った中に複数のsectionタグで構成しています。
構造はheader.phpなどと同じようなモノですが、content_boxとsidebar_boxの二つに分けています。

2-4.style.css

style.cssはfunctions.phpから読ませてこんな感じに記述しています。

@charset "utf-8";
/*
Theme Name: sample_theme_06
Author: lotokunn
Description: orginal theme
Version: 0.0.1
*/
body {
	margin: 0px;
	padding: 0px;
}
header, footer, main {
	position: relative;
}
header {
	background-color: #e3e3e3;
}
main {
	background-color: #a3a3a3;
}
footer {
	background-color: #3e3e3e;
	color: #ffffff;
}
a {
	display: block;
	text-decoration: none;
}
img {
	display: block;
	max-width: 100%;
}
.header_inner, .footer_inner, .main_inner {
	display: block;
	max-width: 100%;
	width: calc(980px - 1rem * 2);
	margin: 0px auto;
	padding: 1rem;
}
.header_inner {
	background-color: #a3a3a3;
}
.footer_inner {
	background-color: #a3a3a3;
	height: 200px;
}
.main_inner {
	background-color: #66cccc;
	height: 500px;
}
.content_box, .sidebar_box {
	float: left;
	background-color: #ffff99;
}
.content_box {
	width: 70%;
	margin-right: 1rem;
	height: 300px;
}
.sidebar_box {
	width: calc(30% - 1rem);
	height: 350px;
}

基本となる構成タグをposition: relativeで位置を指定しています。

mainタグ内のcontent_boxやsidebar_boxは、calc()で幅計算を行い表示させています。

3.まとめ

以上が、今デザインしているテーマ内容です。全然、大雑把ではありますが、基本的なレイアウトは完成です。

後は、細かいレイアウトをすればテーマは出来るかと思います。

まだまだ、初心者ではありますがこんな感じでテーマって作るんだな!と、思って頂けたら幸いです。

では、今回はここまでで!(>ω<)ノシ

WordPressカテゴリの最新記事