wordpressのオリジナルテーマ作成時に最初に作るindex.phpファイルの作成手順メモ（自分用）のついでに投稿記事内にソースコードを表示するプラグインCrayon Syntax Highlighterをテスト

2015年12月10日

crayon5

まずEMMETで!変換してDOCTYPEとかの宣言記述
ヘッド情報内
title部分から。
WP管理画面で設定するサイトタイトルを引っ張ってくる記述

<?php wp_title( ‘|’, true, ‘right’ ); bloginfo(‘name’); ?>

※記事ページのタイトルを記事タイトルに合わせて切り替える仕様。通常verは…？
メタ情報でビューポート設定

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

スタイルシート呼び出し

<?php echo get_stylesheet_uri(); ?>

サイト上部にメニューを呼び出す記述（フッターと一緒に書かないと意味なし

<?php wp_head(); ?>

wp_headを入れることで発生するトップマージンを削るため管理画面のユーザー >　あなたのプロフィールからサイトバー非表示設定をチェック
（http://goo.gl/bmzHo7）
ヘッド情報終了。
ヘッダー作成

ヘッダーアウター作成
ヘッダーインナー作成
セクション作成
（ロゴ部分）h1にaタグ入れて、WP管理画面で設定するサイトタイトルを呼び出す記述。

<?php bloginfo('title'); ?>

aタグのリンク先を、ホーム画面？サイトトップに飛ばす記述

<a href="<?php echo home_url('/'); ?>">

フッター作成
フッターアウター、フッターインナー、セクション
メインラッパー、カラムズラッパー（float）、メインカラム（float）、右カラム（float）、clearboth、clearboth
メインカラム内にワードプレスループ挿入

<?php if (have_posts()) :
while (have_posts()) : the_post() ; ?>
<div id="post-<?php the_ID(); ?>"<?php post_class(); ?>>
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<p class="post-meta">
		<span class="post-date">Posted - <?php the_date(); ?></span>
	</p>
	<?php the_content(); ?><!-- excerpt以外の書き方→ -->
</div>
<?php 
endwhile;
else : ?>
<div class="post">
	<h2>記事はありません</h2>
	<p>お探しの記事はありませんでした。</p>
</div>
<?php endif; ?>

右カラム内にウィジェット呼び出す記述

<?php 
	if ( is_active_sidebar( 'sidebar-1' ) ) :
	dynamic_sidebar( 'sidebar-1' );
else: ?>
	<div class="widget">
	<h2>no widget</h2>
	<p>ウィジェットは設定されていません。</p>
	</div>
<?php endif; ?>

functions.phpを作成
WP管理画面メニューに「ウィジェット」を表示するコードを記述

//ウィジェットを表示
register_sidebar( array(
'name' => 'サイドバーウィジット-1',
'id' => 'sidebar-1',
'description' => 'サイドバーのウィジットエリアです。',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
) );

WP管理画面でウィジェット設定
OK。
全体のCSSを整える（省略）
TOPページの記事一覧を抜粋表示に変更する
ループのcontentをexcerptに変更してfunctions.phpに下記を追記

//本文抜粋表示
function new_excerpt_more($more) {
return '<a href="'. get_permalink( get_the_ID() ) . '">…続きを読む</a>' ;
}
add_filter('excerpt_more', 'new_excerpt_more');

で、single.phpとかfrontpage.phpとか作成していく
front-page.phpのページャー設定 

<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
	<ul class="page-nation">
		<li class="prev"><?php next_posts_link('next &raquo;'); ?></li>
		<li class="next"><?php previous_posts_link('&laquo; prev'); ?></li>
	</ul>
<?php endif; ?>

このあたりでそれぞれのセクションのphpファイルを作成して分ける
header.php
sidebar.php
footer.php
index→front-page→singleの順番にコピペ
front-page.phpのルーブ処理の下（間？）にページネーション追加 

<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
	<ul class="page-nation">
		<li class="prev"><?php next_posts_link('next &raquo;'); ?></li>
		<li class="next"><?php previous_posts_link('&laquo; prev'); ?></li>
	</ul>
<?php endif; ?>

single.phpにSNSボタンとページネーション（front-pageで使用したものとは別）を追加 

<ul class="sns-btn">
	<li>
		<div class="fb-like" 
		data-href="<?php the_permalink(); ?>" 
		data-layout="button_count" 
		data-action="like" 
		data-show-faces="true" 
		data-share="false">
		</div>
	</li>
	<li class="twitter-b">
		<a href="https://twitter.com/share" 
		class="twitter-share-button" 
		data-url="<?php the_permalink(); ?>" 
		data-via="stepbystep_blog">
		Tweet</a>
		<script>
		!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
		p=/^http:/.test(d.location)?'http':'https';
		if(!d.getElementById(id)){js=d.createElement(s);
		js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
		fjs.parentNode.insertBefore(js,fjs);}}
		(document, 'script', 'twitter-wjs');
		</script>
	</li>
</ul>

<ul class="page-nation-single">
	<?php if( get_previous_post() ): ?>
		<li class="prev">
			<?php
			$previous_post = get_previous_post();
			$pre_post_title = $previous_post->post_title;
			if ( mb_strlen( $pre_post_title ) > 18 ) { $pre_post_title = mb_substr( $pre_post_title, 0, 18). '...'; }
			if ( !empty( $previous_post ) ): 
			?>
				<a href="<?php echo esc_url( get_permalink( $previous_post->ID ) ); ?>" title="<?php echo $previous_post->post_title; ?>"><i class="fa fa-chevron-circle-left"></i> <?php echo $pre_post_title; ?></a>
			<?php endif; ?>
		</li>
	<?php endif; if( get_next_post() ): ?>
		<li class="next">
			<?php
			$next_post = get_next_post();
			$next_post_title = $next_post->post_title;
			if ( mb_strlen( $next_post_title ) >18 ) { $next_post_title = mb_substr( $next_post_title, 0, 18). '...'; }
			if ( !empty( $next_post ) ): ?>
				<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" title="<?php echo $next_post->post_title; ?>"><?php echo $next_post_title; ?><i class="fa fa-chevron-circle-right"></i></a>
			<?php endif; ?>
		</li>
	<?php endif; ?>
</ul>
<div style="clear: both;"></div>

CSSを整形。
少し寄り道をして、
フロントページの記事投稿日のところで
同日内に2コ以上投稿した時に投稿日が消えないようにする変更を加える
the_date部分をthe_timeに変更するだけ。()の中の記述で様々な表示方法にできる。ココに載ってるので参照
今回は「2015年12月10日 Thu 23:45」みたいに表示したいので「the_time(‘Y年m月d日 l G:i’)」と記述
★「2015年12月10日 Thu 23:45」にならない！！曜日が日本語表記になってしまう…
コチラを見てfunctions.phpに記述を加えたけど変わらず。
よく分からんので一旦保留
もうひとつ寄り道して、
single.phpのページネーションに「«」とか「»」を付け足す
先ほど付け足したページネーションをおさらいすると下記 

<ul class="page-nation-single">
	<?php if( get_previous_post() ): ?>
		<li class="prev">
			<?php
				$previous_post = get_previous_post();
				$pre_post_title = $previous_post->post_title;
				if ( mb_strlen( $pre_post_title ) > 18 ) { $pre_post_title = mb_substr( $pre_post_title, 0, 18). '...'; }
				if ( !empty( $previous_post ) ):
			 ?>
				<a href="<?php echo esc_url( get_permalink( $previous_post->ID ) ); ?>" title="<?php echo $previous_post->post_title; ?>">
					<i class="fa fa-chevron-circle-left"></i><?php echo $pre_post_title; ?>
				</a>
			<?php endif; ?>
		</li>
	<?php endif; if( get_next_post() ): ?>
		<li class="next">
			<?php
				$next_post = get_next_post();
				$next_post_title = $next_post->post_title;
				if ( mb_strlen( $next_post_title ) >18 ) { $next_post_title = mb_substr( $next_post_title, 0, 18). '...'; }
				if ( !empty( $next_post ) ):
			 ?>
				<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" title="<?php echo $next_post->post_title; ?>">
					<?php echo $next_post_title; ?><i class="fa fa-chevron-circle-right"></i>
				</a>
			<?php endif; ?>
		</li>
	<?php endif; ?>
</ul>

これの、 

<ul class="page-nation-single">
	<?php if( get_previous_post() ): ?>
		<li class="prev">
			<?php
				$previous_post = get_previous_post();
				$pre_post_title = $previous_post->post_title;
				if ( mb_strlen( $pre_post_title ) > 18 ) { $pre_post_title = mb_substr( $pre_post_title, 0, 18). '...'; }
				if ( !empty( $previous_post ) ):
			 ?>
				<a href="<?php echo esc_url( get_permalink( $previous_post->ID ) ); ?>" title="<?php echo $previous_post->post_title; ?>">
					<i class="fa fa-chevron-circle-left"></i><?php echo $pre_post_title; ?> //ココの部分と
				</a>
			<?php endif; ?>
		</li>
	<?php endif; if( get_next_post() ): ?>
		<li class="next">
			<?php
				$next_post = get_next_post();
				$next_post_title = $next_post->post_title;
				if ( mb_strlen( $next_post_title ) >18 ) { $next_post_title = mb_substr( $next_post_title, 0, 18). '...'; }
				if ( !empty( $next_post ) ):
			 ?>
				<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" title="<?php echo $next_post->post_title; ?>">
					<?php echo $next_post_title; ?><i class="fa fa-chevron-circle-right"></i>//この行の先頭部分
				</a>
			<?php endif; ?>
		</li>
	<?php endif; ?>
</ul>

に書き加える。

 ≪  前の記事
good-morningSteps to Create – wordpress original-theme #memorandum
次の記事  ≫ 
ワードプレスインストールの流れメモ（さくらの場合