カテゴリー: wordpress

chancemaker html5 css3 wordpressでレスポンシブルwebデザインしてみる

参照　wp3サイト構築ブック　ビジネスサイトｐ51

ベースになるのはindex.php

●グランドナビ部分はカスタムメニューを使用　wp3構築ブック p66

メニューにおけるブログへのリンク設定は、ページでは時系列で投稿できないことからページからはしない。カスタムリンクのラベルとURLを入力する。このとき、URLに何も入力しないとボタンが生成されないので何かいれること

 

functions.phpへ記述

register_nav_menus(array(
‘navbar’ => ‘ナビゲーションバー’
));

index.phpへ記述

<?php wp_nav_menu(array(‘theme_location’ => ‘navbar’)); ?>

 

トップページ部分はページ部分に”ホーム“としてデフォルトであるのでこのナビゲーションラベルをTOPへ変更すると固定ページで作っているトップページと関連付られる

 

●メイン画像について

wordpressで全部サイトを作るとして、トップページのメイン画像にはjavascriptでスライドいれることが多い。カスタムヘッダーで指定して画像を入れる作りにしてしまうと、トップにおいてカスタムヘッダー画像の記述が反映してしまうのでは？

WP3構築ブックｐ65

なので、メイン画像の部分はカスタムテンプレートで対応してみる

※カスタムヘッダーの注意。
メインの画像はアイキャッチを使えばよいが、カスタムヘッダー機能を追加して外観のヘッダで標準でしようする画像を設定すると、トップページのメイン画像の部分に標準画像が入ってしまうのでそこでは設定しないこと。となると標準画像への設定は不要かも？

 

<?php if(is_home()): ?>
これだとindex.phpのホームだけに適用。今回はメイン画像はスライドショーするからpageでトップは作るので下記のように変更　　　ｗｐレッスンブック　ｐ295

<?php if(is_page(TOP)): ?>
<?php query_posts(‘pagename=TOP’); ?>
トップページのみ出力

<p<?php echo get_the_post_thumbnail($post->ID); ?></p>
トップページ以外に出力
<?php else: ?>
アイキャッチがある場合はアイキャッチ画像をない場合はヘッダー画像を出力
<?php if(has_post_thumbnail($post->ID)): ?>
<p><?php echo get_the_post_thumbnail($post->ID); ?></p>
<?php else: ?>
<p><img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>”/></p>
<?php endif ; ?>
<?php endif; ?>

 

 

●固定トップページのみ表示させる

<?php if(is_home()): ?>
<?php query_posts(‘pagename=TOP‘); ?>
<?php if(have_posts()):
while(have_posts()): the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>

<?php else: ?>

TOPは固定ページのトップページのスラッグで設定している。上記のように記述することによりトップページだけで表示されるようになる　　WP3構築ブックｐ85

 

●トップページのみNivo Slider使用

hemes内に nivo-sliderを設置　（デスクトップ、webコンテンツ、nivo-sliderより）

head内に下記表記
※pascal.css, orman.css, へのリンク設定しないとページャー部分がコントロール出来ないので表記する必要あり

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/themes/default/default.css” type=”text/css” media=”screen” />    <link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/themes/pascal/pascal.css” type=”text/css” media=”screen” />    <link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/themes/orman/orman.css” type=”text/css” media=”screen” /><link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/nivo-slider.css” type=”text/css” media=”screen” ><link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/demo/style.css” type=”text/css” media=”screen” >

 

bodyに下記表記

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/demo/scripts/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/jquery.nivo.slider.pack.js”></script>

<script type=”text/javascript”>
$(window).load(function() {        $(‘#slider’).nivoSlider( {
effect:’random’, // 画像切り替え時のアニメーション
slices:15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:500, // アニメーション速度(ms)
pauseTime:5000, // 画像切り替えまでの時間(ms)
controlNav:false, // コントロールナビの非表示
} );
});
</script>

<div　class=”slider-wrapper theme-default”>
<div id=”slider”>
<img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image1.jpg” alt=””  />         <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image2.jpg” alt=””  />       <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image3.jpg” alt=”” />       <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image4.jpg” alt=””/>         </div>
</div>

 

 

 

●上記をまとめて、header.phpへメイン画像部分を記す。

固定トップページの場合はnivo sliderを表示。動的ページ用home（ブログ）の場合はカスタムヘッダ画像を表示。アイキャッチ画像がある場合はアイキャッチ画像を表示。

<section id=”main_image”>
固定ページTOPの時は
<?php if(is_page(TOP)): ?>
<?php query_posts(‘pagename=TOP’); ?>固定ページTOPにのみ適用

<!–nivo slider–>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/demo/scripts/jquery-1.9.0.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/jquery.nivo.slider.js”></script>

<div class=”slider-wrapper”>
<div id=”slider”  class=”nivoSlider”>
<img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image1.jpg” alt=””  />         <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image2.jpg” alt=””  />       <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image3.jpg” alt=”” />       <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image4.jpg” alt=””/>         </div>
</div>


<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/demo/scripts/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/jquery.nivo.slider.pack.js”></script>
<script type=”text/javascript”>$(window).load(function() {        $(‘#slider’).nivoSlider( {effect:’random’, // 画像切り替え時のアニメーション
slices:15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:500, // アニメーション速度(ms)
pauseTime:5000, // 画像切り替えまでの時間(ms)
controlNav:false, // コントロールナビの非表示
} );
});
</script>
<!–nivo slider END–>

固定ページＴＯＰ以外の時
<?php else: ?>

<div id=”other-image”>
※他のページのメインイメージ幅を#main_image img {max-widht:auto;}にするとnivo slider上で二重に表示されるので、他のページであれば要素#other-imageで囲み#other-image img{max-width:auto;}で幅を自動調節させるために表記する
固定ページＴＯＰ以外で且つhomeならば
<?php if(is_home()): ?>

<p><img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>”/></p>

固定ぺ―ジ以外でhomeでもない他のページならば
<?php else: ?>
アイキャッチで画像を表示させているならば
<?php if(has_post_thumbnail($post->ID)): ?>
<p><?php echo get_the_post_thumbnail($post->ID); ?></p>
アイキャッチ画像がなく標準のカスタムヘッダーで指定した画像であれば
<?php else: ?>
<p><img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>”/></p>
<?php endif ; ?>

<?php endif; ?>

</div>
<?php endif; ?>
</section>

 

 

 

●トップページとして設定する
設定　表示設定 で固定ページチェックオン　フロントページでトップページのページを選ぶ
wordpress レッスンブック　p309

 

●ブログページ（home）と他の固定ページ用のメインの画像の記述

 

<section id=”main_image”><?php if(is_home()): ?>

<p><img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>”/></p>

<?php else: ?>
<?php if(has_post_thumbnail($post->ID)): ?><p><?php echo get_the_post_thumbnail($post->ID); ?></p><?php else: ?><p><img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>”/></p><?php endif ; ?>

<?php endif; ?>

</section>

 

●タブレット用

#wrapperの width: 100%; 　　#grandnav ul のwidthも100%  　グランドナビの各幅は#grandnav li a {display:block;        width:120px;}

 

●タブレット　トップページ

PC用のwrapperの幅は960px    feed用の幅はPC用は550pxなのでタブレットは可変にするので500÷960×100=52%
バナーのエリアは 390pxなので 390÷960×100=40.62%

コンテンツ幅の比率

 

※MPBはタブレットではoverflow:autoしてもスクロールできない。


 

メイン画像部分の設定

wordpressで全部サイトを作るとして、トップページのメインにはjavascriptでスライドいれることが多い。カスタムヘッダーで指定して画像を入れる作りにしてしまうと、トップにおいてカスタムヘッダー画像の記述が反映してしまうのでは？

WP3構築ブックｐ65

なので、メイン画像の部分はカスタムテンプレートで対応してみる

wordpressへアクセスできない

管理画面はおろか、wpで作ったページすべてにアクセスできなくなった。

wp-contentフォルダと.httaccess wp-config.phpをとりあえずサイトからダウンロード。

まさはしＦＰのサーバーでは設定が特殊下記の通りにする。

まず、wordpress3.1系をfilezellaでアップ。

まさはしサーバーの管理画面のhttps://cp.win-is.comで管理画面へ。

ファイルマネージャでwpの親フォルダに対して書き込みの所を許可　　インストールマニュアル参照

ダウンロードしていたwp-content   wp-config.php   .httaccess   をアップ。

 

これで治った。データーベースが壊れるかもしれないのでバックアップは毎日googleのバックアップアカウントへ取ることにした。