MAMPを使ったWordpressでのWEB制作方法10 初心者向け
MAMPを使ったWordpressでのWEB制作方法10 初心者向け
前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法9 初心者向け
前回設定したブログ一覧にサムネイルを設定します。
ブログのサムネイル設定
wordpressの初期設定ではブログの投稿/編集画面には
サムネイル画像を設定する項目がありません。
まずは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);
?>
サムネイル機能追加の下の２行をphpの閉じタグの中に追記します。
管理画面を再読込すると右のタブに画像投稿機能（アイキャッチ画像）が追加されます。
ここにアイキャッチに使用する画像を設定して更新をしましょう。
アイキャッチ画像を設定できました。
index.phpのimgタグを以下に書き換えましょう。
このときthumbside部分はfunctions.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>
投稿ごとのサムネイル画像が表示できました。
やや横に伸びているので横幅を50pxに調整します。
function.phpに記述した数字部分が画像サイズです。
次回は投稿一覧を表示できるようにファイル作成します。
次の記事はこちら
MAMPを使ったWordpressでのWEB制作方法11 初心者向け
Author And Source
この問題について(MAMPを使ったWordpressでのWEB制作方法10 初心者向け), 我々は、より多くの情報をここで見つけました https://qiita.com/fumiya0414/items/ef3f2f76d62bedf8512c著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .