HOME > WEB > WordPress構築 テーマ作成編
つぶやく
WordPress構築 テーマ作成編

先日MovableTypeがおかしくなったのを機に一念発起して作ったこのWordPress
インストールやらは置いといて、一連の作業を備忘録として残しときますかね

まずは何はともあれテーマの作成
これまで使ってたMovableTypeと同じ形で作るだけだから難しくはなかったかな。

基本パーツはヘッダー、サイドバー2つ、フッター。

 header.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<title><?php if(is_date()){the_time('Y年');if(is_month()){the_time('n月');}if(is_day()){the_time('n月j日');}echo 'の記事 - ';}elseif(is_category()){echo '『'.single_cat_title( '', false ).'』に関する記事 - ';}else{wp_title ( '-', true,'right' );} ?><?php bloginfo('name'); ?></title>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="keywords" content="らぶびあん日記,らぶびあん,らぶびあ,lovebeerkenn">
	<meta name="description" content="<?php if(is_home()){bloginfo( 'description' );}else{echo mb_substr(strip_tags($post-> post_content), 0, 80)."...";} ?>">
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
	<meta name="viewport" content="width=device-width , minimum-scale=1, maximum-scale=1">
	
	<?php wp_head(); ?>
</head>

<body>
<div id="container">

	<?php if(!is_home()){ ?><a href="<?php echo home_url( '/' ); ?>" title="トップへ戻る"><?php } ?><div id="header"></div><?php if(!is_home()){ ?></a><?php } ?>

	<div id="main">

jquery等々の色付けはなしにして基本部分だけ抜粋。
タイトルと概要、ヘッダー画像部分のリンクは表示するページによって場合分け

 footer.php

		<div class="clear"></div>
	</div><!-- #main -->

	<div id="footer"></div><!-- #footer -->

</div><!-- #container -->

<?php wp_footer(); ?>

</body>
</html>

このブログのフッターはただの色付けだけだからdiv id=”footer”の中身は空っぽw

あとはサイドバーをfunction.phpとsidebar.phpで定義しておいて、index.phpで呼び出し。

 function.php

if ( function_exists('register_sidebar') ){
	register_sidebar(array(
		'name' => 'サイドバー1',
		'id' => 'alpha',
		'before_widget' => '<div class="widget">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>'
	));
	register_sidebar(array(
		'name' => 'サイドバー2',
		'id' => 'beta',
		'before_widget' => '<div class="widget">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>'
	));
}

 sidebar-alpha.php

		<div id="alpha" class="sidebar">
      
			<ul>
	      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(alpha) ) : ?>
	      <?php endif; ?>
			</ul>

		</div><!-- #alpha -->

もう1個のサイドバーも同様に。

 index.php

<?php get_header(); ?>

	<div id="contents">
		<?php get_template_part( 'loop', 'index' ); 	?>
		<?php wp_pagenavi(); ?>
	</div><!-- #contents -->

<?php get_sidebar("alpha"); ?>
<?php get_sidebar("beta"); ?>
	
<?php get_footer(); ?>

これで外枠おっけー

あとは記事のループ部分をloop.phpで作って基本部分完成
loop.phpは日時表示やらカテゴリ表示やらコメントやら・・・たくさんあるので割愛w

まぁとりあえず

<?php the_content(); ?>

とだけでも書いとけば画面にはなるね

最後にCSSで整形して終わりかな。
かな。とかいったけど、レスポンシブWebデザインにするためのCSSだからここが一番めんどいかったんだけどね

ちょっとCSSは備忘録書こうにも時間かかりそうだから、これはいずれ。”いずれ”があるかどうかは未定w
他にアーカイブページ用archive.php、コメント用comment.php、記事ページ用single.phpを作ってるけど、これは気が向いたらw

てなわけで、見た目が完成したから次はデータのインポート関連。
いつになるかはもちろん不明

コメントを残す



このページのトップへ