WordPress 記事3件ごと、4件ごとに〜する

アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね

ちゃんとプログラムを理解している人ならすごく簡単なことだと思うのですが、ノンプログラマの私には毎回戸惑います。

なのでこれを機会にあらためておさらいを。

通常の記事ループ

4記事ごとにdivで囲みたい

$hoge = 1;

ループの回数を入れる変数

$hoge % 4 == 1 && $hoge != 1

4で割った余りが1で、かつカウンターが1(最初)でなければdivを閉じて次のdivタグを出力 します。

$hoge++;

ループ回数を1つ増やす。

 

 

参考にさせてもらった記事

[解決済み] [閉] 記事を決められた数毎にタグ(div等)で囲みたい
http://ja.forums.wordpress.org/topic/1101

WordPressのエントリーを横並びにしてぴったり揃える
http://www.webopixel.net/wordpress/140.html

web pixelさんではoverflow:hidden を使ってcssだけで横並びする方法も記載せれています。

久しぶりのIE7 バグ

最近はIE7は動作対象からはずすことが多くなったので、忘れていた(知らなかった?)バグに遭遇。備忘録として残します。

 

その1: floatした要素の中身が表示されたり、されなかったりする。

cssでdt,ddを横並びさせます。

こんな感じで設定してたのですが、IE7で見ると、2番目のdtの中の要素が
消えている!

いつものようにググってみたら、同じ症状ではないですが、参考になるサイトを見てやってみたら表示されました。

それは、消えた要素の親要素にwidth:100%を指定するということです。
height:1px;でもいいみたいです。

私の場合は、width:100%;を指定したら解決できました!

floatした際に背景が消える件(IE編)
http://blog.webcreativepark.net/2007/01/08-231453.html

 

その2:インライン要素の上下のボーダーが消える

どうも、高さが親要素の高さを超えているのが原因らしいです。

これも解決方法みつけました!

消えるインライン要素に

を加える方法。

参考になりました。ありがとうございます!

インライン要素に指定したパディングやボーダーの上下が消えるhttp://pentan.info/stylesheet/bug/winie046.html

 

今さらながら勉強になります。。。。

WordPressのブログ基本情報の取得・条件分岐タグまとめ

記憶力が弱くて毎回検索してしまうworedpressの基本情報の取得方法をまとめてみます。

もう検索しなくて済む^^

基本情報の取得

トップページURL

home_url()

 サイトのタイトル

bloginfo(‘name’);

サイトの概要(キャッチフレーズ)

bloginfo(‘description’);

フィードの取得

Atom
bloginfo(‘atom_url’);

RSS2.0
bloginfo(‘rss2_url’);

テーマのディレクトリURL

get_template_directory_uri();

スタイルシートのURL

get_stylesheet_uri();

子テーマから親テーマのディレクトリを取得

get_stylesheet_directory_uri();

 

条件分岐タグ

トップページかどうか

is_home() トップページかどうか
is_front_page()  フロントページかどうか
is_page()  固定ページかどうか
is_single()  投稿ページかどうか
is_archive()  アーカイブページかどうか
is_category()  カテゴリーアーカイブページかどうか
is_tag()  タグアーカイブページかどうか
is_date  日付アーカイブページかどうか
is_post_type_archive()  カスタム投稿タイプのアーカイブページかどうか
is_paged  固定ページの2ページ目以降かどうか
is_admin()  管理ページかどうか

 

レスポンシブレイアウトの基本設定

サイトをレスポンシブにする場合にまず最初に設定することのまとめ。

ブレークポイントを決める

レイアウトを切替る画面サイズを決めます。
PC・タブレット・スマートフォンそれぞれに対応したレイアウトにするなら

PC向け       768px以上
タブレット向け   768pxまで
スマートフォン   480pxまで

こんな感じでしょうか。

ちょっと使わないとすぐ忘れてしまうので、iphoneなどのデバイスの解像度を一覧にまとめておきます。

 

端末 画面サイズ(inch) 画面解像度(px) デバイスピクセル比 ブラウザサイズ
iPhone4 3.5インチ 640 x 960 2.0 320 x 480
iPhone5/5s 4インチ 640 x 1136 2.0 320 x 568
iPhone6 4.7インチ 750 x 1334 2.0 375 x 667
iPhone6 plus 5.5インチ 1080 x 1920 2.0 414 x 738
iPad mini 9.7インチ 1536 x 2048 2.0 768 x 1024
iPad 7.9インチ 1536 x 2048 2.0 768 x 1024

View Portの設定

実際のHTMLファイルにviewportの設定をします。

 IE8以下の対応

IE8以下ではhtml5やメディアクエリーに対応していないため、javascriptを設定します。

html5shiv.jsを入れる

 https://code.google.com/p/html5shiv/

css3-mediaqueries.jsを入れる

https://code.google.com/p/css3-mediaqueries-js/

 CSSの設定

ブレイクポイントをしていたサイズに応じてmedea queryを設定します。

もっと細かく設定するなら

メディアクエリーの記述方法には、

・モバイルファーストか
・PCファーストか
という考え方の違いで記述方法も変わってくると思います。

クロスブラウザ(IE8以下でも)opacity,RGBaに対応する

IE8以下では透明の要素(opacity,rgba)には対応していませんが、
IE8以下でも対応させるには

 

例えば背景だけを透過させてテキストは透過させたくない場合は、opacityではなくRGBaを設定します。

GradientType

グラデーションの方向を指定
0は縦方向、1は横方向のグラデーションになります。

StartColorStr

グラデーションの開始の色を指定。
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

EndColorStr

グラデーションの終わりの色を指定
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

 

参考サイト

RGBa Browser Support
http://css-tricks.com/rgba-browser-support/

IE8とIE9できれいに透過を適応させるCSS
http://news.ko-zu.com/bgiecss/

カスタム投稿タイプを簡単に設定できるプラグイン:Custom Post Type UI

カスタム投稿タイプを設定するとき、プラグインを使いたくなくてfunctions.phpに設定していましたがプラグインも簡単かな〜と思って導入してみた

とても簡単に設定できるんだけど、オプション設定部分がわからなくなるので書き留めます。

WordPress › Custom Post Type UI « WordPress Plugins

https://wordpress.org/plugins/custom-post-type-ui/

 

Add Edit Post Types ‹ とくしよ!ネット — WordPress

Labels

管理画面で表示される名前を設定できます。

2Add Edit Post Types ‹ とくしよ!ネット — WordPress

Settings

高度な設定が出来る部分。ここが今日のメイン。

■一般公開(default:true)
一時的にカスタム投稿タイプを無効にしたいとき

■UI を表示(default:true)
管理画面で表示させる

■Has Archive(default:false)
日付アーカイブ、カテゴリーアーカイブなど投稿を一覧表示するかどうか
trueにする頻度高

■Exclude From Search
検索対象からはずすかどうか
検索結果に表示させたい場合は、falseのままで

■利用タイプ
ユーザーの権限によりカスタム投稿タイプを編集できる権限を記入

■階層(default:false)
固定ページのような親子関係を作りたい場合はtrue

■リライト(default:true)
スラッグをpost type slugの名前と変えたい場合はtrue
次項にリライトしたいスラッグを記入

■カスタムリライトスラッグ
リライトしたいスラッグ名を入力します

■With Front(default:true)
カスタム投稿タイプのパーマリンクに関係するようなのですが今イチわかってません。取りあえずいじらなくてもOKかな

■クエリーバージョン(default:true)
ここもよくわからず。初期値のままでOKなよう

■メニューの位置
管理画面の左メニューでの表示位置。
5〜100までの数値で設定します。空欄の場合はコメント下に表示されます

5〜9:投稿の下
10〜19:メディアの下
20〜ページの下

■Show in Menu(default: True)
「UI を表示」がtrueな場合、有効

■Menu Icon
管理画面左メニューのアイコンを指定できます。
絶対パスで入力

■サポート
使用する機能にチェックを入れます。

■ビルトイン分類
投稿(post)で使われているカテゴリーやタグを利用する場合はチェックをいれます

 

以上。。大雑把ですが。

カスタムタクソノミーについては後日まとめます。

Internet Explorer 互換表示にさせない

Internet Explorer の互換表示とは、新しいバージョンのIEで崩れてしまったホームページを以前と同じように表示させる機能。

IE11では非推奨になりました。

つい最近知ったのは、イントラネットでは最初から互換表示になるようになっているこ。これはIE11でもそのようです。

互換表示モードにならないようにするには、metaタグを追加します。

にする必要はもうないのかな?

chrome=1 は、Internet Explorerの古いバージョンでGoogle ChromeのJavaScriptとレンダリングエンジンを動かすためのオープンソースのプラグインChrome Frameがインストールされていれば、それを有効にする。。。という事だと思います。使ってないので詳しくは不明^^;

ただ、Chrome Frameももうアップデートの予定はなく、開発終了したそうです。

Illustrator 破線の分割(アウトライン)

イラレで放射状のラインを引く

例)200px x  200px の正円を作って、 線の太さを100pxにする。

SnapCrab_NoName_2015-1-14_17-11-44_No-00

破線の「線分」を36ptぐらいに

SnapCrab_NoName_2015-1-14_17-12-8_No-00

でもこれをパスのアウトラインや分割と拡張をやろうとすると

SnapCrab_NoName_2015-1-14_17-13-11_No-00

こんなふうになる。

いろいろググってみたところ「透明部分を分割・拡張」で

すべての線をアウトラインに変換」にチェックを入れるとOKらしい。

SnapCrab_NoName_2015-1-14_17-12-49_No-00

できました!

 

SnapCrab_NoName_2015-1-14_17-13-27_No-00

マウスオーバーでヒラッとさせる

マウスオーバーでちょっと違うエフェクト

html

jQuery

css

こちらを参考にさせていただきました

http://jsdo.it/fctale/mLaO