スポンサーリンク

WordPress get_posts 任意の記事ですね、わかります

スポンサーリンク

以前メンバーから固定ページを作ってくれと頼まれました。

原案がこちらになります↓

投稿者ごとの最初の記事、人気記事、最新記事どれも自動ってことは......

うん。PHP案件だ。ピピピーーーピーでH (爆発)

でも僕はPHPを触り始めたばっかりで、わからない事も多く頑張りましたよ(ここぞとばかりにアピール)

PHPよりもCSSの方が苦労したけど

色々調べてみましたが、投稿者ごとの記事を出す方法は探せなかったのでWordPress公式の関数リファレンスとにらめっこしました。

関数リファレンス - WordPress Codex 日本語版

いつもお世話になっています。

作成したコード

固定ページ用menber.php

<?php $menbar_id = 3; ?> 
        <!--新着記事-->
        <div class="box_image">
<?php $posts = get_posts(array(
  'author' => $menbar_id,
  'posts_per_page' => 1,
  'orderby' => 'date',
  'post_type' => 'post',
)); ?>
            <?php foreach ($posts as $post) : setup_postdata($post); ?>
                <div class="box"><a href="<?php the_permalink() ?>">新着記事</a></div>
            <?php if (has_post_thumbnail()) : ?>
                <div class="relative">
                    <a href="<?php the_permalink(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/clear.png" alt="clear_image" width="200" height="112.5"></a>
                    <div class="center"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('test'); ?></a> </div>
                </div>
            <?php else : //画像ないとき?>
                <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" width="200"></a>
            <?php endif; ?>
            <div class="box"><p><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p></div>
            <?php endforeach; ?>
            <?php wp_reset_postdata(); ?>
        </div>
        <!--新着記事-->

        <!--人気記事-->
        <div class="box_image">
<?php $posts = get_posts(array(
  'author' => $menbar_id,
  'posts_per_page' => 1,
  'meta_key' => 'views',
  'orderby' => 'meta_value_num',
)); ?>
            <?php foreach ($posts as $post) : setup_postdata($post); ?>
                <div class="box"><a href="<?php the_permalink() ?>">人気記事</a></div>
            <?php if (has_post_thumbnail()) : ?>
                <div class="relative">
                    <a href="<?php the_permalink(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/clear.png" alt="clear_image" width="200" height="112.5"></a>
                    <div class="center"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('test'); ?></a> </div> 
                </div>
            <?php else : //画像ないとき?>
                <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" width="200"></a>
            <?php endif; ?>
            <div class="box"><p><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p></div>
            <?php endforeach; ?>
            <?php wp_reset_postdata(); ?>
        </div>
        <!--人気記事-->

        <!--最初の投稿-->
        <div class="box_image">
<?php $posts = get_posts(array(
  'author' => $menbar_id,
  'posts_per_page' => 1,
  'orderby' => 'date',
  'order' => 'ASC',
)); ?>
            <?php foreach ($posts as $post) : setup_postdata($post); ?>
                <div class="box"><a href="<?php the_permalink() ?>">あいさつ</a></div>
            <?php if (has_post_thumbnail()) : ?>
                <div class="relative">
                    <a href="<?php the_permalink(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/clear.png" alt="clear_image" width="200" height="112.5"></a>
                    <div class="center"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('test'); ?></a> </div>
                </div>
            <?php else : //画像ないとき?>
                <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" width="200"></a>
            <?php endif; ?>
            <div class="box"><p><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p></div>
            <?php endforeach; ?>
            <?php wp_reset_postdata(); ?>
        </div>

function.php

//固定ページ
add_image_size('test', 200, 110, false);

CSS(style.css)

.box_image {
      display: inline-block;
      vertical-align: top;
      margin-left: 20px;

  }
  
  .box {
      width:200px;
      text-align: center;

  }

  .center{
      position: absolute;
      text-align: center;
      top: 50%;
      left: 150%;
      margin: 0 -100%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
 
 }

結果

出来ましたーーーーー(疲れたもぉぉぉん)

リンクはこちらから↓

オーカワ
オーカワです!! ブログに書く内容はソフトウェアの事ばっかり。YABAI奴 僕の書いた記事はこちらから 近況 ブログ

注意

メンバーページの画像は2017/4/14の画像になります。

告知せずにメンバーページは変わることがあります。ご了承ください。

解説(任意の記事の出し方)

PHPのコードを見ると人気記事、新着記事、最初の投稿はほとんど同じです。

違うのはget_posts関数です。色々な検索条件で投稿記事を取得します。

get_posts関数の使い方は公式ページを見ればわかると思います。

テンプレートタグ/get posts - WordPress Codex 日本語版

投稿者ごとに記事を変えたい時は1行目の    (<?php $menbar_id = 4; ?>)  数字を変えます。この数字は投稿者のIDです。投稿者のIDは登録順で数字が変わります。

アイキャッチ画像がない場合は/images/no-image-320.pngを呼び出しています。もしコピペする時は用意をするようにしてください。

また人気記事はmeta数を"views"としていますが、こちらはWp-PostViewsというプラグインを使用しています。view数っていったらこのプラグインだと思って使わせて頂きました。

WP-PostViews
Enables you to display how many times a post/page had been viewed.

いつもお世話になっています。

感想

PHPの事を全然知らないのでもっと楽にできるんじゃないかと思いつつ、プログラム内で重複してるところが多いので関数化したいなと思っています。function.phpに書けばいいのかなー

でもPHP少し書けるようになったし、いい経験だったかと。

これからもPHPでいろいろ便利にしていこうと願望がうまれていたり。

ってな事でおつかれっしたー

The following two tabs change content below.

オーカワ

GCPばっか触ってるにゃーんエンジニア。 こちらのブログも書いてた。

←Twitterやってるよ。フォロバ率97%

コメント