Web系のお仕事全般やってます！Webシステム構築、ホームページ制作 etc.
ブログ
- 知っていると役に立つ情報
HTMLやCSS等の変更がなかなか反映されないときはこうする!
2017.04.05
Webサイトの変更がなかなか反映されない場合は下記のようにすればいい。
この方法はスーパーリロード(強制再読み込み)と言うらしく、強制的にサーバからファイルを再取得してくれる。
Windows の場合
Ctrl + F5
Mac の場合
Command + R
- CSS
iPhoneのフォームのボタンにCSSをあてる方法
2017.04.04
iPhoneでは通常、フォーム上のボタンはCSSが効かない状態になっている。
下記のCSSを記述すれば、iPhoneのフォーム上のボタンでもCSSを反映できるようになる。
input[type=”submit”]{
-webkit-appearance: none;
}
-webkit-appearance: none;
}
- CSS
absolute(position)で縦横中央寄せにする方法
2017.03.28
【CSS】
.boxCatStyle{
position: relative;
overflow: hidden;
display: block;
width: 100%;
min-height: 200px;
border: 1px #a30528 solid;
}
.txtCatStyle{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
display: inline-block;
font-size: 1.5rem;
font-weight: bold;
color: #a30528;
}
position: relative;
overflow: hidden;
display: block;
width: 100%;
min-height: 200px;
border: 1px #a30528 solid;
}
.txtCatStyle{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
display: inline-block;
font-size: 1.5rem;
font-weight: bold;
color: #a30528;
}
【HTML】
<div class=”boxCatStyle”>
<span class=”txtCatStyle”>CatStyle!</span>
</div><!–/.boxCatStyle–>
<span class=”txtCatStyle”>CatStyle!</span>
</div><!–/.boxCatStyle–>
【Result】
CatStyle!
- jQuery
Hover
2017.03.28
$(‘.test’).hover(function(){
… マウスオーバーした際の処理
},function(){
… マウスアウトした際の処理
});
… マウスオーバーした際の処理
},function(){
… マウスアウトした際の処理
});
- Wordpress
カテゴリ、タームの一覧取得方法
2017.03.07
＝ カテゴリ一覧取得 ＝
$args = array(‘hide_empty’ => false,’parent’=>false);
$cats = get_terms(‘category‘,$args);
if($cats and is_array($cats)):
foreach($cats as $cat):
…
echo esc_html($cat->name);
echo esc_html($cat->slug);
echo esc_html($cat->term_id);
…
endforeach;
endif;
$cats = get_terms(‘category‘,$args);
if($cats and is_array($cats)):
foreach($cats as $cat):
…
echo esc_html($cat->name);
echo esc_html($cat->slug);
echo esc_html($cat->term_id);
…
endforeach;
endif;
＝ ターム(カテゴリ)一覧取得 ＝
$args = array(‘hide_empty’ => false,’parent’=>false);
$terms = get_terms(‘news-cat‘,$args);
if($cats and is_array($cats)):
foreach($cats as $cat):
…
echo esc_html($cat->name);
echo esc_html($cat->slug);
echo esc_html($cat->term_id);
…
endforeach;
endif;
$terms = get_terms(‘news-cat‘,$args);
if($cats and is_array($cats)):
foreach($cats as $cat):
…
echo esc_html($cat->name);
echo esc_html($cat->slug);
echo esc_html($cat->term_id);
…
endforeach;
endif;
取得条件($args)で指定できるパラメータ項目
※下記はよく使うもの。下記以外は 関数リファレンス/get terms を確認。
- hide_empty
- true(デフォルト):このタームが設定されている投稿がない場合にはタームを返さない。
false:このタームが設定されている投稿の有無に関係なくタームを返す。
- parent
- false:トップレベルのターム(最上位のターム)のみを返す。親タームIDを指定するとその親タームIDを持つタームのみを返す。
- include
- 取得したいタームIDの配列を指定する。
- child_of
- 指定したタームIDの子孫をすべて返す。
取得できるデータ
- name
- 表示名
- slug
- スラッグ
- term_id
- タームID※
- parent
- 親ターム(カテゴリ)のID※
- count
- このターム(カテゴリ)が設定されている記事数※
- term_group
- まだ使ったことがない
- term_taxonomy_id
- まだ使ったことがない
- taxonomy
- まだ使ったことがない
- description
- まだ使ったことがない
※取得できるデータはすべて文字列なので、数値として使用する場合は数値への変換が必要。
- Wordpress
サブクエリ
2017.03.05
$args = array(‘post_type’=>’news’,…);
$query = new WP_Query($args);
if($query->have_posts()): while($query->have_posts()): $query->the_post();
…
endwhile(); endif;
wp_reset_postdata();
$query = new WP_Query($args);
if($query->have_posts()): while($query->have_posts()): $query->the_post();
…
endwhile(); endif;
wp_reset_postdata();
- Wordpress
タックスクエリ – tax_query
2017.03.04
$tax_query = array(
array(
‘taxonomy’ => ‘news-cat’,
‘field’ => ‘slug’,
‘terms’ => array(‘news-slug’),
‘include_children’ => true,
‘operator’ => ‘IN’
),
array(
‘taxonomy’ => ‘news2-cat’,
‘field’ => ‘slug’,
‘terms’ => array(‘news2-slug’),
‘include_children’ => true,
‘operator’ => ‘IN’
),
‘relation’ => ‘AND’
); $args = array(…,’tax_query’=>$tax_query);
array(
‘taxonomy’ => ‘news-cat’,
‘field’ => ‘slug’,
‘terms’ => array(‘news-slug’),
‘include_children’ => true,
‘operator’ => ‘IN’
),
array(
‘taxonomy’ => ‘news2-cat’,
‘field’ => ‘slug’,
‘terms’ => array(‘news2-slug’),
‘include_children’ => true,
‘operator’ => ‘IN’
),
‘relation’ => ‘AND’
); $args = array(…,’tax_query’=>$tax_query);
■ fieldで設定できる値：slug / term_id / name / term_taxonomy_id
■ termsの値は配列で指定する。
■ include_children … 子ターム(カテゴリ)を含める場合は true 含めない場合は false。
■ operatorで設定できる値：IN / NOT IN / AND
■ relationで設定できる値：OR / AND
※ ‘relation’ => ‘AND’ は複数条件に指定したい taxonomy がある場合のみ必要。
- Wordpress
メタクエリ – meta_query
2017.03.03
$meta_query = array(
array(
“key” => “style”,
“value” => “cat”,
“compare” => “LIKE”
),
array(
“key” => “style”,
“value” => “dog”,
“compare” => “NOT IN”
),
‘relation’ => ‘AND’
);
$args = array(…,’meta_query’=>$meta_query);
array(
“key” => “style”,
“value” => “cat”,
“compare” => “LIKE”
),
array(
“key” => “style”,
“value” => “dog”,
“compare” => “NOT IN”
),
‘relation’ => ‘AND’
);
$args = array(…,’meta_query’=>$meta_query);
■ compareで設定できる値：LIKE / NOT LIKE / IN / NOT IN / BETWEEN / NOT BETWEEN
※ value値が配列の要素のひとつである場合はcompareはINではなくLIKEを使わないと取得できない。
※ オブジェクトに対してvalue値を指定する場合は、term_idを指定する。
■ relationで設定できる値：OR / AND
PAGE TOP