webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

静的ページにWordPressの新着記事を追加する方法

静的ページにWordPressの新着記事を表示させる方法
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

WordPressを構築する、WordPressでサイトを作る、WordPress化する、など色々な言い方で呼ばれる「ホームページをWordPressで作成する」ということは、WordPressの[テーマ]を作成する、というパターンが多いかと思います。

サイトをテーマファイルとして作成し、そのテーマを有効化してサイトを表示するというパターンですね。

このテーマ化以外にも、WordPressを引用して使う方法があります。

サブディレクトリ内のWordPressを別ディレクトリから引用する

この方法はよく、「静的ページにWordPressの新着記事を表示させる方法」という風に表現されています。

通常のhtmlサイトは”静的ページ”や”静的サイト”と呼ばれますのでこの呼び方も併せて覚えてみてください^^

簡単に言うと同じドメインのサブディレクトリ内に設置したWordPressを他のディレクトリから呼び出す方法です。

イメージはこんな感じです。

htmlサイトと、WordPressサイトが独立した状態で存在していて、htmlサイトにWordPressサイトの記事を引用している(引っ張ってきている)ような状態。

今回は分かりやすくドメイン直下にあるhtmlサイトにサブディレクトリのWordPressを引用する図にしてありますが、別のサブディレクトリから呼び出すのも問題ないです。

やることは同じです。

実例

実際に当サイトがその方法を使っていますので、実例を見ていただけます。

このブログのURLはhttps://chiiweb.net/media/です。

chiiweb.netのサブディレクトリ[media]にWordPressが存在していて、ドメイン直下chiiweb.netを開くと教室のページが存在しています。

教室のページはWordPressとは関係していない独立した静的サイトです。

後に、ブログ([media])を制作しましたので、教室のページにも新着記事として読み込みたいと考えました。

このように、mediaに存在するWordPressの新着記事を表示させています。

実際にどうなっているかを見ていきましょう。

静的ページにWordPressの新着記事を表示させるまでの流れ

先に流れを説明します。

簡単3ステップです!笑

  1. WordPress記事を表示させたいhtmlファイルをPHP化
  2. WordPressの記述を使うという宣言文を追加
  3. 記事を表示させるコードを書く

これだけですね。

では順番に説明します。

1.WordPress記事を表示させたいhtmlファイルをPHP化

これはもう、そのままで、例えばindex.htmlというファイルにWordPress記事を表示させたい場合は、index.phpに書き換えます。

原始的にファイル名を変えちゃってOKです。

ファイル名変更で、index.htmlをindex.phpに変更させてください。

2.WordPressの記述を使うという宣言文を追加

次に、「このファイルにWordPressで使われるタグを同じように使えるようにするよ」という決まった宣言文を書きます。

これがね、これです。↓

<?php require('media/wp-load.php'); ?>

media部分をWordPressが設置されているサブディレクトリ名に変更してください。

これをphpファイルの一番上の行に加えてください。

<!doctype html>

の上の、一番上です。

これを記述することで、WordPressファイルのwp-load.phpを呼び出すことができるので、WordPressテーマで使用するような記述が、このファイルにも使えるようになります。

3.記事を表示させるコードを書く

あとは、テーマを作るときに使用する、記事を呼び出す記述を該当箇所に書くだけです。

<section class="media" id="media">
		
		<?php
			$wp_query = new WP_Query();
			$args = array(
				'post_type' => 'post',
				'category__not_in' => array( 19, 20, 22 ),
				'posts_per_page' => 8,
			);
			$wp_query->query( $args );
			if ( $wp_query->have_posts() ) {
				?>
			
			<ul class="media_list">
				<?php
					while ( have_posts() ) {
					the_post();
					?>
				<li class="flex">
					<div class="eyecatch">
						<a href="<?php the_permalink(); ?>"><?php
						if ( has_post_thumbnail() ):
							the_post_thumbnail('thumbnail');
						else :
							?>
						<img src="<?php echo get_template_directory_uri(); ?>/img/no-image.jpg" alt="">
						<?php endif; ?>
						</a>
					</div>
					<div class="txt_area">
						<div class="date"><?php the_time(get_option('date_format')); ?></div>
						<div class="media_ttl"><?php the_title(); ?></div>
					</div>
				</li>
					
				<?php
				}
				wp_reset_query();
				}
				?>
			</ul>
</section>

詳細を簡単に解説していきます。

<?php
			$wp_query = new WP_Query();
			$args = array(
				'post_type' => 'post',
				'category__not_in' => array( 19, 20, 22 ),
				'posts_per_page' => 8,
			);
			$wp_query->query( $args );
			if ( $wp_query->have_posts() ) {
	?>

まずこちらです。

今から何を表示させるのかの記述ですね。

‘post_type’ => ‘post’, は、「投稿」つまり新着記事です。

‘category__not_in’は、表示させないカテゴリを選択しています。

‘category_name’ =>”, にすると、特定のカテゴリのみを出す、ということもできます。

この辺はWordPressの記述の仕方になりますので、「WordPress 新着記事 表示」とかで検索したら情報がたくさん出てきます^^

WordPressテーマに使われるような記述をそのまま使えるということですね。

‘posts_per_page’ => 8, は、8件出してね!

ということです。

この後に、ulタグが来て、次に

<?php
 	while ( have_posts() ) {
	the_post();
?>

これが入った、次の要素から、繰り返しが始まります。

終了の合図は↓こちらです。

<?php
	}
 wp_reset_query();
	}
?>

この間に挟まれた、<li>〜〜〜</li>が繰り返されるので、書き出されるソースとしては、

<ul>
 <li>〜〜</li>
 <li>〜〜</li>
 <li>〜〜</li>
 <li>〜〜</li>
 <li>〜〜</li>
 <li>〜〜</li>
 <li>〜〜</li>
 <li>〜〜</li>
</ul>

こんな感じです。

‘posts_per_page’ => 8, なので、8回<li>が繰り返されます。

<li>の中は、アイキャッチ画像と日付とタイトルですね。

アイキャッチ画像がない場合は、no-image.jpgが出るようになっています。

これで出力されますね。

あとはスタイルを書いて整えてあげれば使えると思います。

この方法を使うパターン

方法は分かりましたが、ではこの方法、実際にどんな時に使うのがベストでしょうか。

先ほど例で見ていただいた当サイトのように、サイトとブログが独立している場合に、サイトにブログの更新情報を掲載したい時に使うことができます。

また、WordPressサイトは存在しないようにして、WordPressの機能のみ使いたい場合にも、この方法が使われることも考えられますね。

参考)

ブログなども更新しないし、お知らせとかを表示したいだけで、投稿ページ(singleページ)へのリンクも貼らないような場合にも使えます。

わざわざテーマ化する工数を考えると、今回の方法の方が効率が良い、という場合の選択肢の1つですね。

ブログを更新したり、読み込んだ記事へのリンクをさせる場合などは、WordPressサイトにリンクすることになるので、テーマも必要になります。

伝えたいことが伝わっているか少々不安(汗)

まぁ、そんな感じでしょうかもうすぐ8才の息子が描いたドラえもん(無理やり終わらせる)

いいなと思ったら
TAPしてね♡↓

合わせて読んでほしい記事

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン WordPress 静的ページにWordPressの新着記事を追加する方法

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)