ハッピーな毎日のためにがんばろう。

web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3Webデザイン
Webデザイン

wpの最新記事を別htmlに表示する方法

wordpressはブログや最新記事のみにしたいという人が多くなっております。wpのテンプレートは大体似たような感じになってしまいオリジナリティがないから、htmlで自由なページをつくりそこに情報だけは入れたいというご要望。参考までに工程をメモしておきますね!

事前準備でございます

1 サーバーにwpをインストール

2 .htaccess使えるようにしておくこと(アパッチ制御の設定ファイル)

※サーバーにより使えない場合がありますのでお気をつけください。

3 .htaccessに追加/エックスサーバーの場合

AddType x-httpd-php .html .htm の1行追加

サーバーによって違います。これでhtmlでもhtmでもphpが動きます!

※超初歩的なことですが、.htaccessはフツーにしていると見えませんのでリネームしてから作業してね

 

作業開始でございます

1 index.htmlにWordPressのタグを読み込めるようにする

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

newsのところを変更する。

※必ず宣言文の上に追加すること(一番上)

 

2 wordpressの記事を入れたいhtmlの位置に下記のコードをいれる

<!--ここからwordpress新着-->

<div class="topics_list">
<?php query_posts( 'posts_per_page=10' ); ?>
<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
  <!-- 投稿 -->

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 投稿日時 -->
    <span class="post-date"><?php the_time( 'Y/m/d' ); ?></span>
    <!-- /投稿日時 -->
    <!-- タイトル(リンク付きタイトル) -->
    <span class="post-title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </span>
    <!-- /タイトル --> 
  </div>

  <!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->
</div>

<!--ここまで-->

3 このままだとただ文字が並ぶだけなのでちょっと投稿日時のspanにcss追加

style="display:inline-block; width:6em;"

dd-html

 

 

 

 

 

おー表示されましたね!

Category : Webデザイン
ブログ一覧へ戻る