忍者ブログ
13 September

moreタグの上に広告を置く

functions.php

<div style="margin-top:15px;">
    <p class="ad1" style="padding:40px;background:#ccc;float:left;margin-left:20px;border:#000 solid 1px;">コード埋め込み場所</p><p class="ad2" style="padding:40px;background:#ccc;float:right;margin-right:20px;;border:#000 solid 1px;">コード埋め込み場所</p>
    <p style="clear:both;margin-bottom:20px;"></p>
</div>
PR
10 September

スマホとPCでの表示の振り分け　Wordpress

http://webtrace-cuisine.com/201302/wpismobile/
例によって覚書コピペ。わかりやすくまとまっていました。

①スマホでの表示時のみ、特定のコンテンツを表示させる

<?php if (wp_is_mobile()) :?>
【スマホで見たときのみ表示させるコンテンツ】
<?php endif; ?>>

②上と全く反対で、
スマホでの表示時のみ、特定のコンテンツを表示させない
（wp の前に反意を意味するびっくりマークを付けることで｢モバイル機器以外なら→つまり PC での表示だったならば｣という意味になります）

<?php if (!wp_is_mobile()) :?>
【PC で見たときのみ表示させるコンテンツ】
<?php endif; ?>

③PC と スマホで表示コンテンツをそれぞれ分ける

<?php if (wp_is_mobile()) :?>
【スマホで見たときのみ表示させるコンテンツ】
<?php else: ?>
【PC で見たときのみ表示させるコンテンツ】
<?php endif; ?>

通常のHTMLの場合は「display:none;」で非表示したり:block;で表示したりしてかなりめんどうでした。WPはこれで簡単だし、余計な読み込みもなくなります。

10 September

Sticky　スクロールするとサイドバーがついてくるjQuery

http://stickyjs.com/
http://webkaru.net/jquery-plugin/sticky/
https://github.com/garand/sticky

<script type="text/javascript" src="jquery.sticky.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("#side_inner").sticky({topSpacing:230, bottomSpacing:600});
  });
</script>

Contained Sticky Scroll　を前に使っていたので今回もこれを使おうと思った。
しかし今回はサイドバーを上にで引っ張りあげており、このJQueryだと元あった位置から追従するため、上部が見切れてスクロールしてしまった。
上下の間隔を指定するオプションがあるのかないのかわかんないしよく調べてないので、他のjQueryを探した。

手書きのものとかもコピペして色々試したが、サイドバーの下にfloatしているmainカラムがもぐりこんじゃって、なんでこうなるの状態。
Contained Sticky Scroll　ではレイアウトが崩れたりはしない。
どうしよーーーというときに「Sticky」（今調べたがスクロールして追従する技術をスティッキーというらしい）を発見。
崩れない！オプションで上下にpadding的なものをいれられる！見切れ改善！わーい！思い通りにできた！！！今度からコレ使うわ。

※<div id="side"><div id="side_inner">サイドバー</div></div>
※囲いを二重にして、中のものに指定しないとちゃんとできない気がする
01 September

「トップへ戻る」を普通に記述する方法

http://saka-d.com/omotenashi/20120824.html

HTML
まずhtmlに「トップへ戻る」枠を書く

<div id="pagetop"><a href="#header">トップへ戻る</a></div>


SCRIPT
id名を書き換え丸写しする。数値を変えると速度や画像出現ポイントが変わる

<script>
jQuery(function() {
var topBtn = $('#pagetop');
topBtn.hide();

jQuery(window).scroll(function () {
if ($(this).scrollTop() > 150) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});

topBtn.click(function () {
jQuery('body,html').animate({scrollTop: 0}, 500);
return false;
});
});
</script>


CSS
ロールオーバーで画像を変えたい。
png透過して画像の大きさが違うとか形が違うと、下の画像が見えてしまう。
なのでon･off2枚の画像をくっつけて、hoverしたときに位置を動かす
固定するのでfixed設定。

#pagetop { position:fixed; bottom:0px; right:0px; }
#pagetop a{
display:block;
width:50px;
height:100px;
background:url(images/pagetop.png) no-repeat;
}
#pagetop a:hover{
background-position: 0 -100px;
}

WPで画像を付け替えられる「page to top」プラグインが普通にない。
勝手に置き換えればできるかもしんなけど、デフォルト設定のこととか色々あるしめんどい。
ちょっと検索したら簡単なのが設置できるじゃないか。
わざわざプラグインでやるまでもない。あまりプラグインいれたくないし。
全ページに必要だからscriptはfooterに入れるだけでいいし。
28 August

アーカイブ別、カテゴリー別テンプレートの作り方

[解決済み] カスタム投稿タイプのアーカイブ用テンプレート (7 件の投稿)
http://ja.forums.wordpress.org/topic/6064

カテゴリー別

category-6.php　など該当カテゴリーIDの数字をつける


カスタムポストUIで作った投稿ポストに別のテンプレートを使いたい場合

archive-スラッグ名.php
'has_archive' => true　必須　オプションでtrueに設定する