wordpressの投稿タイトルをhtmlに表示させる方法

NO IMAGE

毎回忘れるのでまとめました。

1. html一番上に

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

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

 

(テストサイトの時は階層に注意 testフォルダとblogフォルダが同階層にある場合は

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

.一個増えるので注意!!(忘れるとトップページが500エラーになる)
2. 表示させたい部分に

<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="info-img">
            <?php the_post_thumbnail( array( 75, 75 ) ); ?>
          </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; ?>

 

css は適宜アレンジ

#blogfeed {
    text-align: left;
    list-style: none;
    border-top: 1px dotted #CCC;
    margin: 0px;
    padding: 0px;   
    }
#blogfeed li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #B6BEBA;
}
#blogfeed li .blog_date {
    padding-right: 15px;
}

#blogfeed li .blog_img {
    padding-right: 15px;
}

#blogfeed a {
    display: block;
    color: #000;   
}

#blogfeed a:hover {
    background: #E2F0F5;
}

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

.htaccessに下記を追記(ロリポの場合)

AddHandler php7.1-script .html .htm
  • 改行や1行あけるなどすれば.htaccessは他の記述もまとめてOK
  • .htaccessファイルの最後の行の末端に改行を入れること。 改行が入ってない場合エラーになる。
  • パーミッションは「604」
  • 7.1はphpのバージョンを記述 レンタルサーバで調べる(マルチドメインでも設定時期により異なるのでその都度調べること!)
  • ロリポ以外のサーバは書き方が違うので都度調べる

★カテゴリを指定する場合はコチラ
WordPress でカテゴリーを複数指定して新着を表示する。

 

参考サイト
https://ja.wordpress.org/support/topic/%E9%9D%99%E7%9A%84%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%ABwordpress%E3%81%AE%E6%9C%80%E6%96%B0%E8%A8%98%E4%BA%8B%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E3%81%AB%E3%81%AF%EF%BC%9F/
http://qiita.com/A76/items/cf9844e310a219aca2d8

この案件を元に問い合わせる↓

必須 お名前

必須 メールアドレス

ご職業 ※お問い合わせに関係するもの

必須 電話番号※メールが届かない場合おかけすることがございます。

お問合せ内容

web制作覚え書きカテゴリの最新記事