Help us understand the problem. What is going on with this article?

MAMPを使ったWordpressでのWEB制作方法10 初心者向け

MAMPを使ったWordpressでのWEB制作方法10 初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法9 初心者向け

前回設定したブログ一覧にサムネイルを設定します。

ブログのサムネイル設定

wordpressの初期設定ではブログの投稿/編集画面には
サムネイル画像を設定する項目がありません。

Image from Gyazo

まずはfunction.phpファイルに機能を追加します。

function.php
<?php
//カスタムメニュー
register_nav_menus( //メニュー機能をオンにする
array(
'place_global2' => 'グローバル', //“メニュー英語名” =>”メニュー名”,
'place_utility' => 'ユーティリティ',
'place_sidebar' => 'サイドメニュー',
'place_footer' => 'フッター',
)
);

//サムネイル機能追加
add_theme_support('post-thumbnails');
add_image_size('thumbside', 85, 85, true);
?>

サムネイル機能追加の下の2行をphpの閉じタグの中に追記します。

管理画面を再読込すると右のタブに画像投稿機能(アイキャッチ画像)が追加されます。

Image from Gyazo

ここにアイキャッチに使用する画像を設定して更新をしましょう。

Image from Gyazo

アイキャッチ画像を設定できました。
Image from Gyazo

index.phpのimgタグを以下に書き換えましょう。
このときthumbside部分はfunctions.phpの記述と
同じ名前に設定をしてください。

index.php
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <!--書き換え前-->
                <img src="<?php echo get_template_directory_uri();?>/images/cat_3.jpeg">
          <!--書き換え後-->
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

投稿ごとのサムネイル画像が表示できました。
Image from Gyazo
やや横に伸びているので横幅を50pxに調整します。
function.phpに記述した数字部分が画像サイズです。
Image from Gyazo

次回は投稿一覧を表示できるようにファイル作成します。

次の記事はこちら
MAMPを使ったWordpressでのWEB制作方法11 初心者向け

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした