index.phpを作る / wordpressのテーマのを自作する

2019年8月1日 21:34 カテゴリー: Wordpress

つ!い!に!このファイルを作ることで、あなたのブログのトップページが表示されることになります。ただし、サムネイルだけfunctions.phpを作らないと表示されません!注意!

前までの記事では実際に表示されなかった(されるけど反映されなかった)ので、イマイチ実感がなかったかもしれないですが、これでやっと「変更」→「即反映」となるので、モチベーションもあがりますよね!

それでは見ていきましょう!

index.phpのコード

<?php get_header(); ?>
	<!--メインカラムとサイドバーひとまとめ-->
	<div class="page">

		<!--メインカラム-->
		<div class="main">
			<!--新着記事-->
			<h1>新着記事</h1>
			
			<!--重要!消しちゃダメ!-->
			<?php if(have_posts()): while(have_posts()): the_post(); ?>
				
				<!--一記事のセクション-->
				<section>
					

						 
						 <!--記事へのリンクのボックス-->
						<div class="entry">
							
						<!--サムネイル-->
             <!--サムネイルにリンクを張る-->
             <a href="<?php the_permalink(); ?>">
                            <!--サムネイルを表示する-->
							<?php if( has_post_thumbnail() ): ?>
							<?php the_post_thumbnail('thumbnail'); ?>
							<?php else: ?>
							<img src="<?php echo get_template_directory_uri(); ?>/image/noimage.jpeg" />
     						<?php endif; ?>
						</a>
							<!--タイトルやデータ等のボックス-->
							<div class="entry-text">
								
								<!--記事のデータ-->
								<div class="entry-meta">
									<?php echo get_the_date(); ?>
								</div>
								
								<!--記事タイトル-->
				 				<?php the_title( '<h3><a href="<?php the_permalink(); ?>">', '</a></h3>' ); ?>
								
								
								<div class="entry-category">
									カテゴリ:<?php the_category( ' / ' ); ?>
								</div>
								
							</div>
							
						</div>
						 
		 			 </a>
	
				</section>
 			<!--重要!消しちゃダメ!-->
			<?php endwhile; endif; ?>
			
			<!--ページネーション-->
			<?php if( function_exists("the_pagination") ) the_pagination(); ?>
			
		</div>
		
		<!--サイドバーの呼び出し-->
		<?php get_sidebar(); ?>
		
	</div>

<!--フッターの呼び出し-->
<?php get_footer(); ?>

い・・・今までと比べて長くね・・・?

なんかPHPもいっぱいあるし。

解説します!

index.phpの解説!

<?php get_header(); ?>

いきなりPHP!header.phpを読み込みます!っていう意味です。ほぼこの形でしか使わないので形で覚えてください。Wordpress独自の物なので、WP以外では使えません。

<div class="page">

メインのボックスとサイドバーを一まとめにしています。pageという名前を付けました。

<div class="main">

メインのボックスです。記事のリンクや本体等メインのコンテンツはここに入ります。

<h1>新着記事</h1>

新着記事の見出しです。

記事の一覧表示

<?php if(have_posts()): while(have_posts()): the_post(); ?>

これ凄く重要な奴です。いわゆるループってやつですね。奴は記事がある限り管理画面で設定した回数出力繰り返しますよ!って言っています。変更する必要もないので、そのまま記載してください。

<section>

セクションの事です。ひとまとまりの部分を表すために使います。

サムネイル画像を表示する

<a href="<?php the_permalink(); ?>">

サムネイルにリンクを張る

リンクのURLを入力する部分にPHPで記事のURLを表示するようにしています。これもwordpress特有のPHPですね。色々使い方はありますが、とりあえずこのままでいきましょう。

<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/image/noimage.jpeg" />
<?php endif; ?>

この5行でサムネイル画像を表示します。

if( has_post_thumbnail() ): 

もしサムネイル画像が登録されているなら

the_post_thumbnail('thumbnail');

画像をサムネイルのサイズで表示してください。

wordpressでは画像をアップロードすると4種類のサイズで保存します。他のサイズの表示方法は()の中を変更するだけ。

'medium' 中サイズ
'large' 大サイズ
'full’ 元画像のサイズ

保存される画像サイズは管理画面の設定で変更できます。デザインをする段階で画像サイズは指定してしまいますが、保存されている画像と差がない方が画質の劣化を防いだり、無駄なファイルサイズを読み込ませなくていいので表示速度が上がったりします。

else: 

もしサムネイル画像が登録されていなければ、四行目の

<img src="<?php echo get_template_directory_uri(); ?>/image/noimage.jpeg" />

を表示する。

これは画像を表示するHTMLです。

src=

は画像のURLを記載する場所で、PHPでテーマのあるフォルダを表示します。

echo get_template_directory_uri();

テーマのフォルダにimageというフォルダをさらに作って、その中にnoimage.jpegという画像をアップロードしておけばサムネイルの設定がない場合に noimage.jpeg が表示されます。

僕は100%サムネイル画像を設定するから必要ないよ!って方は画像をアップロードしなくて大丈夫です。僕もしていません。

記事の情報を表示する。

<div class="entry-meta">

メタデータを表示するボックスです。名前はentry-meta!よろしくね!

<?php echo get_the_date(); ?>

日付を表示します。

<?php the_title( '<h3><a href="<?php the_permalink(); ?>">', '</a></h3>' ); ?>

タイトルを記事へのリンクとh3で挟んで表示します。

<div class="entry-category">

カテゴリーを表示するボックスです。名前はentry-categoryですが、カテゴリー以外を入れても大丈夫です。

カテゴリ:<?php the_category( ' / ' ); ?>

投稿のカテゴリをリンク付きで表示します。

<?php endwhile; endif; ?>

ループの終了。

これで記事を表示する部分は終わりです。

ループ内で利用できるテンプレートタグ

その他にも表示可能な物はあります。下記から探して、表示したい場所にペーストするだけです。自分好みにカスタマイズしてみてください。

<?php the_content(); ?>

記事の内容を表示します。ひと昔前に流行ったトップページに何件かの記事が表示されているタイプのブログが作れます。

<?php the_excerpt(); ?>

抜粋を表示します。結構力を入れる場所をトップページに表示できるので記事へのアクセスを見込めますね。トップページに抜粋を表示しているサイトは最近でも結構多いですね。


<?php the_tags(', ');?>

タグを表示します。

ページ下部

<?php if( function_exists("the_pagination") ) the_pagination(); ?>

ページのナビゲーションリンクの表示です。自分では作れなかったので、ナオユネットさんの下記記事を参考にしました。

<?php get_sidebar(); ?>

sidebar.phpを呼び出す。

<?php get_footer(); ?>

footer.phpを呼び出す。

おわった!

まとめ

ループには触らない!

ループの中身は自由自在。

とりあえずコピペ。

以上!

次の記事

WordPressのテーマを作るまとめ