投稿者「あたい」のアーカイブ

2018.2.7
php, wordpress

固定ページとかアーカイブページのサイドバーをページ毎に変える時の条件分岐

ページ毎にサイドバーを切り替えたいときって沢山あると思います。コーポレートサイトなら尚更です。
というわけで以下。

まずサイドバーを呼び出す基本

<?php get_sidebar(part01); ?>　 /*sidebar-part01.phpを呼び出す**/
固定ページ一つだけを別のSidebarを表示する場合
<?php
if(is_page('スラッグ名A')) :
get_sidebar('サイドバーB');
else :
get_sidebar();
endif
?>

もし、「スラッグ名」っていうページだったら「サイドバーB」っていうサイドバー出してねってことです。
ちなみに、「サイドバーB」のところは「sidebar-part01.php」の「part01」の部分だけ入れるよ。全部入れちゃだめだよ。

複数の固定ページを別のSidebarを表示する場合

if(is_page(array('スラッグ名','スラッグ名','スラッグ名'))):
get_sidebar('サイドバーC');
else :
get_sidebar();
endif
?>

もっと分岐

<?php
if(is_page(array('スラッグ名','スラッグ名','スラッグ名'))):
get_sidebar('サイドバーA');
elseif(is_page(array('スラッグ名','スラッグ名','スラッグ名'))):
get_sidebar('サイドバーB');
elseif(is_page(array('スラッグ名','スラッグ名','スラッグ名'))):
get_sidebar('サイドバーC');
else :
get_sidebar();
endif
?>

これ管理面倒だけどまあ楽。

カテゴリごとにSidebarを切り替える（single.php）

<?php
if(in_category('スラッグ名')) :
get_sidebar('ハイフンの後ろ');
elseif(in_category('スラッグ名')) :
get_sidebar('ハイフンの後ろ');
else :
get_sidebar();
endif
?>

カテゴリアーカイブページ（category.php）の場合
is_categoryです。

<?php
if(is_category('スラッグ名')) :
get_sidebar('ハイフンの後ろ');
elseif(is_category('スラッグ名')) :
get_sidebar('ハイフンの後ろ');
else :
get_sidebar();
endif
?>

これ使えるとサイトの表現が格段に上がりますね。
確か、親子関係がしっかり出来た階層サイトの場合、スラッグ名いっぱい入れるの面倒だから、親ページのスラッグ名で判断して子ページに適用、とかもあった気がします。
最近こういう依頼がないのですっかり忘れてしまいましたがググれば出てくるはず。
時間あるときまとめます。

2018.2.7
php, wordpress

ウィジェットを追加する

特定の固定ページに違うウィジェットを使いたい、とか色々出し分けたいときあると思います。
そういう時には新しくウィジェットを追加します。

いじるもの

  • function.php
  • sidebar.phpをコピーしたsidebar-任意の英数字.php

sidebar.php

<?if ( ! is_active_sidebar( '任意の英数字A' ) ) {
return;
}?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( '任意の英数字A' ); ?>
</aside><!-- #secondary -->

これらは例だから、全然違う形で書いてあったりするけど、とりあえずdynamic_sidebarとかactive_sidebarの中に任意の文字入れておけばオッケー

function.php

register_sidebar( array(
'name' => __( 'ウィジェット編集画面上での見出し', '親テーマ名' ),
'id' => '任意の英数字A',
'description' => __( 'ウィジェット編集画面上でのウィジェットの説明', '親テーマ名' ),
'before_title' => '<div class="ttl">',
'after_title' => '</div>',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>'
) );

ちょっと説明＞
before_titleとafter_title：ウィジェットの出力されるタイトルのタグ
こんな感じで出る。

<div class="ttl">ウィジェットのタイトル</div>

before_widgetとafter_widget：ウィジェットの大きい固まりではなくその中のパーツパーツを包むdivの記述ぽい。
変数は謎。とりあえず親テーマのregister_sidebar見とけばなんとかなるぞ。
テーマ作った人は偉大。

大事なこと
idはsidebar.phpで設定した名前にしておくこと！

そしたらpage.phpとかサイドバーを取得しているテンプレートファイルの以下の箇所を変更する。

<?php get_sidebar("任意の英数字"); ?>

これは、コピーしたsidebar.phpにつけた名前を入れる。

こんな感じです。

ついでに、固定ページとか投稿ページとかでこのスラッグ名の固定ページだけ今回作ったサイドバーを出したいとか、このカテゴリーのアーカイブページだけこのサイドバーを出したいとかその色々はここから。

(っ’ヮ’c)＜おつかれ

2018.2.6
php, wordpress

○年前より古い記事は取得しない

タイトルのとおりです。
あまり需要がないのか調べてもヒットしなくて苦戦しましたがなんとか。

strtotime( ‘-2 years’ )　の部分を-1daysとか-3monthsとか色々変更するとよしです。

<?php
add_filter( 'posts_where', 'filter_where' );
function filter_where( $where = '' ) {
$where .= " AND DATE(post_date) >= '" . date( 'Y-m-d', strtotime( '-2 years' ) ) . "'";
return $where;
}
global $query_string;
query_posts( $query_string );
?>

実際の使い方としてはこんな感じ。

<div class="txt">
<div class="home-c_t">
<ul class="home-tp">
<?php
add_filter( 'posts_where', 'filter_where' );
function filter_where( $where = '' ) {
$where .= " AND DATE(post_date) >= '" . date( 'Y-m-d', strtotime( '-2 years' ) ) . "'";
return $where;
}
global $query_string;
query_posts( $query_string );
?>
<?php query_posts("showposts=-1&cat=3");
while (have_posts()) : the_post();
?>
<?php
$cat = get_the_category();
$catslug = $cat[0]->slug; //スラッグ名
?>

<?php if(empty($post->post_content)) : ?>
<li class="newscontent">
<div class="<?php echo $catslug; ?> date"><?php the_time('Y.m.d');?></div>
<div id="post-<?php the_ID(); ?>"><?php the_title(); ?></div>
</li>
<?php else : ?>
<li class="newscontent">
<div class="<?php echo $catslug; ?> date"><?php the_time('Y.m.d');?></div>
<div id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>" class="home-a_link"><?php the_title(); ?></a></div>
</li>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
</div>

参考サイト

http://webcake.no003.info/webdesign/wp-queryposts-datesearch.html

すごくためになりそうだったからスクリーンショットもとっといた。（よくページが消えるから

2018.2.5
useful, wordpress

WordPressにおけるカテゴリーの優先度

投稿の一覧出力にカテゴリーの見出しを付けるで出力したい投稿にカテゴリーを付与しました。
しかし、カテゴリー関係なく全部の投稿を一括でarchiveページに表示したいとき少し厄介です。

まずarchive.phpによって生成されるarchiveページは1カテゴリしか表示できないです。（うまくいかないから多分）
なので、大体は各投稿にarchiveページ用の共通カテゴリーをもう一つ付与してその共通カテゴリーのarchiveページということで一括一覧表示する対応だと思いますが、上記の投稿の一覧出力にカテゴリーの見出しを付けるをやろうとすると、なぜか共通カテゴリーの方が優先されてユニークなカテゴリが取得できません。
（ユニークとは言ってますが、共通カテゴリと差別化するだけで実際一個一個違うわけではありません）

なぜか調べたところ、今回共通カテゴリは「Information」というアルファベットにしてました。
他のユニークなカテゴリは日本語でした。
どうやら、get_the_categoryで取得するカテゴリーはアルファベット（AtoZ）→日本語（五十音）の順で優先度が決まるみたいです。
実際、適当な漢字にしたら期待される結果を得ることができました。でも、どうしてもカテゴリスラッグをアルファベットにしたいときってあると思います。
今回がそれです。

そこで、不本意ですがプラグインの力を借りました。

Category Order and Taxonomy Terms Order

です。

なんか、これ何かしらどうにかしたらプラグイン使わずともできるんじゃない？って思いますが、自分では時間がかかりすぎます（非力）
これでカテゴリーの順序（優先度）を変更できるので期待される結果を得ることができます。

2018.2.5
html&css

画像リンクをオンマウスでふわふわtransition

おわり。
0.3sとかいじると変化する速さ変えられるよ。

a:hover img {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
-o-opacity: 0.5;
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
opacity: 0.5;
}

a img {
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
2018.2.1
php, useful, wordpress

投稿の一覧出力にカテゴリーの見出しを付ける

こゆやつ。

まずWordPressのカテゴリを作るとこから始める。

スラッグ名＝$catslug。

$catnameは設定した日本語とかのカテゴリ名が出るよ。

私が作ったやつ。
これを出したいところに入れる。

<div class="pr_area">
<h2>Information</h2>
<div class="pr_content">
<?php
$posts = get_posts(array(
'posts_per_page' => 5, // 表示件数
));
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name; //カテゴリー名
$catslug = $cat[0]->slug; //スラッグ名
?>

<p class="newslist"><span class="time"><?php the_time('Y/m/d') ?></span><span class="news_cat <?php echo $catslug; ?>"><?php echo $catname; ?></span><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p>

<?php endforeach; endif; ?>
<div class="btn_center">
<a class="button" href="<?php echo home_url(); ?>/category/news/">一覧はこちら</a>
</div>
</div>
</div>

CSS

取得したカテゴリスラッグ名分だけ、以下のul li span.cat-a　を作る。
cat-aのところは適宜スラッグ名を入れる。

ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
clear: both;
margin: 0 0 1em;
}
ul li span {
display: block;
float: left;
width: 6em; /*カゴテリー名による*/
margin: 0 10px 10px 0;
padding: 5px;
text-align: center;
font-size: 10px;
}
ul li span.cat-a {
background: #e3efef;
}
ul li span.cat-b {
background: #efe3ec;
}
ul li span.cat-c {
background: #efefe3;
}
ul li span.ymd {
display: inline;
float: none;
padding: 0 5px;
font-size: 13px;
color: #999;
}
2018.1.29
html&css

liの見出しにFontAwesomeのアイコンを使う

HTMLは普通のulとli構成だよ
これで変わる…と思う！

ul {
list-style: none;
padding-left: 1em; /* 文章のスタート位置。li:beforeが入るスペースを確保*/
}

li {
position: relative;
padding-left: 0.4em; /* アイコンと文章の間のスペース */
}

li:before {
font-family: FontAwesome;
content: "\f054" /* 例としてハート形のicon-heartの番号*/
position: absolute;
left: -1em; /* アイコンのスタート位置。左揃えの場合 ul のpadding-leftと同じ値 */
top: 0; /* アイコンの場所を変えたければ適宜変更 */
}
2018.1.29
wordpress

ウィジェットでショートコードを使う

これをfunction.phpに記述する

add_filter('widget_text', 'do_shortcode' );

テーマのカスタマイザーでもショートコードを使えるようになるといいのにな～（ありそうだけど

2018.1.27
js

クリックで隠れていた要素が表示される仕組み

コンテンツ量が多いページを作るときに、内容を隠してクリックでその下あたりに表示させたい時のJS！

HTML

<!-- 表示ボタン -->
<p class="openBtn"><i class="fa fa-chevron-down faColor">　</i>★★★項目名★★★</p>

<!-- 説明文 -->
<p class="textArea">★★★説明文★★★</p>

JS

$(function(){
$(".openBtn").click(function(){
$($(this).next(".textArea")).animate(
{height: "toggle", opacity: "toggle"},
"nomal"
);
});
});
JS(WPのとき）
jQuery(function($){
$(".openBtn").click(function(){
$($(this).next(".textArea")).animate(
{height: "toggle", opacity: "toggle"},
"nomal"
);
});
});

CSS

/* 表示ボタン */
.openBtn {
cursor: pointer;
padding: 10px;
border: 1px solid #9FD6D2;
border-left: 10px solid #9FD6D2;
color: #666;
}

/* 説明文 */
.textArea {
display: none;
padding: 10px 10px 30px 50px;
color: #666;
}

/* 表示ボタン ー 逆三角アイコン */
.faColor {
color: #9FD6D2;
}
2018.1.25
js

ウィジェットのRecent Postで出力した記事リンクのtitle属性を削除

画像の通りです。

Permalink toそのものだけを削除する方法はすぐ見つかりませんでした。
多分、function.phpにフィルターフックで何かすれば出来る気もしますがちょっと時間が無かったのでtitle属性そのものを削除してしまおうという算段です。

というわけで以下のjsを使用。

(function($) {
$(document).ready(function() {
$('h3.rpwe-title a').removeAttr( "title" );
});
})(jQuery);

今回は以下のようなhtmlに対して削除したかったので、上記のような記述になっています。
どこのtitle属性を削除するかは適宜。

<h3 class="rpwe-title">
<a href="#" title="Permalink to 投稿タイトル" rel="bookmark">投稿タイトル</a>
</h3>
← 以前の投稿
新しい投稿 →