*

WORDPRESSでトップメインイメージと中ページ見出し画像を振り分けするメモ。

公開日: : 最終更新日:2014/11/02 コーディング・ツール系

WORDPRESSで制作しています。
いきなりですね。

ただ、検索ばかりしてもなんなので、(忙しいとそうなりますが)拾った情報をまとめて記事にしましたのでシェアなのです。

さて、まずはこちらをご覧ください。
hiyoko

トップページの下のでっかい画像(今回はJQUERYのスライドです※詳細は割愛)と、中ページを画像イメージで作った見出しにする場合のメモです。

中ページは、固定ページをアイキャッチ画像でおのおの設定し、404ページと、残りの投稿ページは全部一緒の見出し(WHAT’S NEWなど)の場合を想定しています。
※見出し画像の位置がコレじゃない場合は、トップページの場合をheader.phpにいれず、home.phpやfront-page.phpで各自設定するなど、振り分けの参考コードとしてご活用ください。

・前提のファイル名

画像はテーマ内imagesフォルダ
スライド用画像:img1.png,img2.png,img3.png
404用画像:404.png
投稿ページ汎用の画像:default.png

・画像サイズ
スライド用画像:940xXXX
見出し画像:940×160
コードはこちら!
[php]

<?php

//トップページの場合
if(is_home()) {
?>

//スライドショー用画像 ※これだけでは動きません、ご参考に
<section id="main_img_index"><img src="<?php bloginfo(‘template_url’); ?>/images/img1.png" alt="" class="alt">

<img src="<?php bloginfo(‘template_url’); ?>/images/img2.png" alt="" class="alt">

<img src="<?php bloginfo(‘template_url’); ?>/images/img3.png" alt="" class="alt">

</section>
<!–↑↑ main_img_index ↑↑–>
<?php
//404ページの場合
}elseif (is_404()) {
echo ‘<img src="’ . get_bloginfo(‘template_directory’) . ‘/images/404.png’ . ‘" width="940" height="160" alt="thumbnail" class="404image" />’;
?>

<?php
//固定ページはアイキャッチ画像に ※function.phpなど設定必要です

}elseif (has_post_thumbnail($post->ID)) { ?><?php echo get_the_post_thumbnail($post->ID); ?>

<?php }else {
//投稿ページ(=固定ページ以外)はデフォルト画像に
echo ‘<img src="’ . get_bloginfo(‘template_directory’) . ‘/images/default.png’ . ‘" width="940" height="160" alt="thumbnail" class="img_thumb" />’;
}
?>
[/php]
header.phpの挿入する画像エリアへ挿入ください。
ご参考になりましたら幸いです。

PR

関連記事

no image

自己紹介に最適!1カラムでスクロールするシングルページ

ちょっと前に1ページで完結するサイトのデザインが海外で流行ってました。 なので、自分も試しに自己

記事を読む

no image

firefoxで印刷するとカラム落ち?…解消法

firefoxで左メニュー2カラムの2ページにまたがるサイトを印刷しようとすると、2ページ目以降、右

記事を読む

更新情報で記事のカテゴリータグを色別で表示【WORDPRESS】

ワードプレスの記事です。 ビギナー向けですが、ネットにちらばってた情報をまとめましたので珍しく

記事を読む

no image

WordPressでページをカテゴリ別に分ける

ワードプレスで各ページのレイアウトをつくってるとき、たとえばこっちのカテゴリーは普通に文章を、こっち

記事を読む

no image

ウィジェットを使わずtwitterをデザインして表示

忘備録的な記事です。 ツィッターのウィジェットは簡単に設置できるけど デザインを合わせづらいんですよ

記事を読む

no image

IE6の印刷対応

ie6にA4サイズの印刷対応をしたので 各バージョンのCSSハックをメモ。 印刷用CSSで横幅95

記事を読む

no image

flashで縦横比そのままに全画面表示(as3)

アニメの他にもイメージ重視のサイトで使いたいフラッシュ。 イメージを大きく左右する動画や写真も大きく

記事を読む

no image

flashを使わないスライドのサイト作ってみました

今更感もありますが、HTML5の初歩とJSでメインイメージのスライドを作ってみたくてサイ

記事を読む

no image

新着情報・ニュースの区切り点線をCSSで

見て頂くと分かるんですが、単純にこちらの箇所のことです。 このまま表示するのは簡単ですが、文字サイ

記事を読む

no image

サブメニューなどのリンクリストの書き方

ほんとのほんとに基本ですが、ぱっと使えるようにメモ。 リンクリストのHTML&CSSの書き方。 リ

記事を読む

PR

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


PR

no image
ムームードメイン

新たにドメインを取得することにしました。 コスト重視でサーバーは

ルーベンス デッサン模写

アトリエでの課題制作

色彩検定の復習しながらイラスツ

お久しぶりの更新です。 せっかく色彩検定を取ったので、 錆

イラスト フリー素材 円満退社

検索用のタイトルで始まりましたが、 イラスト素材を公開しますー!

更新情報で記事のカテゴリータグを色別で表示【WORDPRESS】

ワードプレスの記事です。 ビギナー向けですが、ネットにちらばって

→もっと見る

PAGE TOP ↑