web制作覚え書き

【2023.08一部変更】wordpressの投稿をhtmlに表示させる方法

web制作覚え書き

毎回忘れるのでまとめました。↓こういうの。

1.

html一番上に

<?php require('./blog/wp-blog-header.php'); ?>

blog部分はwpを置いてるフォルダ名に適宜変更する。

追記2022.10.25

index.htmlが表示されるのに404エラーが出る場合は下記のように変更

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


参考サイト:

WP-BLOG-HEADER.PHPをインクルードしたページが404エラーになった時の対処法

wp-blog-header.phpをインクルードしたページが404エラーになった時の対処法
 

2.

(非推奨 2022.9.1追記 の方がいい)表示させたい部分に

サムネ(60*60px)・日付・タイトル表示の場合

<ul id="blogfeed">
    <?php
                    $posts= get_posts("
                    numberposts=5&category=&orderby=post_date&offset=0" );
                    foreach ($posts as $post):
                    setup_postdata($post);
                    ?>
 <a href="<?php the_permalink() ?>">
 <li>
 <div class="blog_img">
<?php the_post_thumbnail( array( 60, 60 ) ); ?>
 </div>
 <div class="blog_date"> <?php the_time('Y.m.d') ?> </div>
 <div class="blog_title"> <?php the_title() ?> </div>
 </li>
 </a> 
<?php endforeach; ?>
 </ul>

サムネ(レスポンシブ)・日付・タイトル・本文抜粋50文字の場合

   <?php
                    $posts= get_posts("
                    numberposts=5&category=&orderby=post_date&offset=0" );
                    foreach ($posts as $post):
                    setup_postdata($post);
                    ?>
    <a href="<?php the_permalink() ?>">
        <div class="row">
            <div class="col-md-2">
               <div class="img img-fluid">
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'thumb')); ?>

</div>
            </div>
            <div class="col-md-8">
                <div class="info-date">
                    <?php the_time('Y.m.d') ?>
                </div>
                <div class="info-title">
                    <?php the_title() ?>
                </div>
                <div class="info-p">
                    <?php echo mb_substr(get_the_excerpt(), 0, 50) . '[...]'; ?>
                </div>
            </div>
        </div>
    </a>
    <hr class="divider-w">
<?php endforeach; ?>

2023.8.8追記

サムネ画像の

<?php the_post_thumbnail(array(350,auto), array('class' => 'thumb')); ?>
 
autoだとエラーになる場合有
→(array(350,250, true),
など数字にすると直った。

吐き出したときサムネに.thumbというクラス名がつきます。

cssで .thumb の設定

.thumb{
    width: 100%;
    height: 250px;
    object-fit: cover;
}
}

object-fit: cover;
がミソ!

画像レスポンシブcss

背景画像は content:
imgタグは object-fit:

3. phpをhtmlで表示させるために

.htaccessに下記を追記

ロリポ・ライトプラン以下の場合

AddHandler php7.1-script .html .htm 

※「7.1」の部分は使用サーバのphpのバージョンを入れる。

※7.4以上は下の書き方でないと出ないような気がする。プラン関係なく。

ロリポ・スタンダードプラン以上の場合

AddType application/x-httpd-php .html

その他、一般的な書き方

AddType application/x-httpd-php .php .html

↑ロリポだとエラーになる可能性あり。(2023.9現在 最新ロリポの8.2モジュール版では動く)

サーバ会社によって違うので調べてください。

.htaccessの注意点

  • 改行や1行あけるなどすれば.htaccessは他の記述もまとめてOK
  • .htaccessファイルの最後の行の末端に改行を入れること。 改行が入ってない場合エラーになる。
  • パーミッションは「604」

カテゴリを指定する場合は

カテゴリIDをカンマで区切る

"numberposts=5&category=3,4&

特定の記事を1件表示するには

  <?php
                  $posts= get_posts("
                  numberposts=1&p=46" );
                  foreach ($posts as $post):
                  setup_postdata($post);
                  ?>

p=46は投稿記事のIDです。

先のループと並べることでこの記事だけ固定されているように見えます。

2021.6.23追記

上記方法だと上限件数が反映されなくなってきたので
phpの書き方こっちのほうがいいみたいです。

マーケティングエージェンシー 株式会社Oz link(オズ・リンク)
 

WordPressのループを理解して、自在に記事一覧を表示しよう!

2022.9.1追記

こっちが最近はよい。php部分。
今日急に上限が効かなくなったサイトはこれで直りました。

<ul>
  <?php
    $posts = get_posts('numberposts=5&category=1');
    global $post;
    ?>
  <?php
    if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <li><a href="<?php the_permalink();?>">
    <?php the_time( 'Y/m/d' ); ?>:<br /> 「<?php the_title(); ?>」
    </a></li>
  <?php endforeach; endif;
    ?>
</ul>

    この記事を元に問い合わせる








    ※確認画面は出ません。そのまま送信されますので、よくご確認の上送信ボタンを押してください。

    ※不具合などで送れない場合は、お手数ですが info@nagakute-design.comまたは090-6363-6760(深谷)まで連絡下さい。