web制作覚え書き

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

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

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
2
3
4
5
AddType application/xhttpdphp .php .html
 
#もしくは、
 
AddHandler application/xhttpdphp .php .html
  • 改行や1行あけるなどすれば.htaccessは他の記述もまとめてOK
  • .htaccessファイルの最後の行の末端に改行を入れること。 改行が入ってない場合エラーになる。
  • パーミッションは「604」
  • 7.1はphpのバージョンを記述 レンタルサーバで調べる(マルチドメインでも設定時期により異なるのでその都度調べること!)
  • ロリポ以外のサーバは書き方が違うので都度調べる
  • php CGI版はこれでよいが
  • モジュール版(ロリポならスタンダードプラン以上)は下記「モジュール版で動かす場合」の通り

★カテゴリを指定する場合はカテゴリ番号をカンマで区切る

“numberposts=5&category=3,4&

参考サイト
 

カテゴリを表示する場合

 <?php
		$category = get_the_category();
		$cat_name = $category[ 0 ]->cat_name;
		$cat_slug = $category[ 0 ]->category_nicename;
        ?>

を <?php $posts = get_posts ・・・の下あたりに

  <a href="<?php the_permalink() ?>">
  <li><span> <?php the_time('Y.m.d') ?></span>
<span class="cat <?php echo $cat_slug; ?>"> <?php echo $cat_name; ?> </span>
 <?php the_title() ?></li>  </a>

表記クラスをCSSで調整

.cat{background-color: #c3a588;
padding: 2px;
color: white;} 

.event{background-color: #f08e5a;}

※この.event はwordpressのカテゴリのスラッグ

モジュール版で動かす場合

ロリポのスタンダードプランはモジュール版なので上記ではうまくいきません。

.httpaccessを下記のようにする

1AddType application/x-httpd-php .html

参考サイト

【ロリポップ!】HTMLをPHPとして動かす(モジュール版)

アイキャッチ画像をレスポンシブにする

html

<?php the_post_thumbnail(array(350,auto), array('class' => 'thumb')); ?>

css

.thumb{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}

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








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

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