12.トップページをちょっと改造。

トップページを別テンプレートに

今までトップページはテーマ標準の固定ページ用のテンプレートをそのまま使ってたのですが、トップページだけに画像を表示したいので切り離すことに。

子テーマにfront-page.phpを作成。

トップページのテンプレートはWordPressの仕様でfront-page.phpが最優先と決まっているので、それだけでトップページが切り替わる。
空のファイルを子テーマに置いただけで反映。
トップページ画面が真っ白になった。

基本は変えないので今までの固定ページのファイルをコピー。

 </header><!-- .entry-header -->
 <div class="titleimage"><img src="http://freepland.chips.jp/mysite/wp-content/uploads/2016/06/frontimage.png"></div>

 <div class="entry-content">
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
 </div><!-- .entry-content -->

headerの下に画像の表示タグを追加

子テーマのstyle.cssにmargin-left:60px追記

トップページ画像

 

で こうなりましたと

navibarと隙間が空きすぎてるので
プログラムにチョット見えてる上のentry-headerを削除して詰めときました。

これからもチョットずついじっていこうと思っています。

追記10月3日

上の画像はsafariではちょうど良かったんですが
chromeやfirefoxではサイドウィジェットと重なることに最近気付いてサイズ修正。safariではチョット隙間空くけど仕方ない。

追記10月30日

再び問題発覚

このテーマ(TwentyThirteen)はレスポンシブになってるので
デバイスのサイズに対応してレイアウトが切り替わるのですが
上のプログラムのように画像をentry-contentの外に配置したので画像にはレスポンシブ機能が反映されないことにやっと気づく。

PCでブラウザのウィンドウを小さくしてみると

トップページ画像失敗例

ね ヘッダーは小さくなってんのにwelcome画像はそのまんま。

ならばentry-contentの中に入れりゃいいだけなんで

 <div id="content" class="site-content" role="main">

 <?php /* The loop */ ?>
 <?php while ( have_posts() ) : the_post(); ?>

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
 
 <div class="entry-content">
<div class="titleimage"><img src="http://freepland.chips.jp/mysite/wp-content/uploads/2015/06/front-image_large-e1477813788514.png"></div>
 <?php the_content(); ?>

移動

これだったら上でやったサイズ修正も必要なくなるので元の画像に戻すことに。

トップページ画像

はい レスポンシブに対応できました。

上でやったcssのmargin調整も不要なので戻して終了。

スマホの方には長い間お見苦しい画面ですいませんでした。

コメントを残す

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

CAPTCHA