Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8586

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

$
0
0

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($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><divclass="b_img"><!--書き換え前--><imgsrc="<?phpechoget_template_directory_uri();?>/images/cat_3.jpeg">          <!--書き換え後--><?phpthe_post_thumbnail('thumbside');?></div><divclass="b_right"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></div></dd></div>

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

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

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


Viewing all articles
Browse latest Browse all 8586

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>