WordPress サイドバーの最新の投稿へアイキャッチ画像を表示する

widgetを編集するには default-widget.php を編集する

ほとんどのテンプレートでサイドバ-には「最近の投稿」を表示する機能がついてるみたいです。
ただ、投稿のタイトルしか表示されないみたいなので、今回はそこにサムネイルを表示させます。

wp-includes の中に default-widget.php というファイルがあり、これがウィジェットを生成してるみたいです。

645行目当たりから最近の投稿ウィジェットをどうかしてるみたいです。
こんな感じです↓

/**
* Recent_Posts widget class
*
* @since 2.8.0
*/
class WP_Widget_Recent_Posts extends WP_Widget {
public function __construct() {
$widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "Your site’s most recent Posts.") );
parent::__construct('recent-posts', __('Recent Posts'), $widget_ops);
$this->alt_option_name = 'widget_recent_entries';
add_action( 'save_post', array($this, 'flush_widget_cache') );
add_action( 'deleted_post', array($this, 'flush_widget_cache') );
add_action( 'switch_theme', array($this, 'flush_widget_cache') );
}
public function widget($args, $instance) {
$cache = array();
if ( ! $this->is_preview() ) {
$cache = wp_cache_get( 'widget_recent_posts', 'widget' );
}
if ( ! is_array( $cache ) ) {
$cache = array();
}
if ( ! isset( $args['widget_id'] ) ) {
$args['widget_id'] = $this->id;
}
if ( isset( $cache[ $args['widget_id'] ] ) ) {
echo $cache[ $args['widget_id'] ];
return;
}
ob_start();
$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
/** This filter is documented in wp-includes/default-widgets.php */
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
if ( ! $number )
$number = 5;
$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
/**
* Filter the arguments for the Recent Posts widget.
*
* @since 3.4.0
*
* @see WP_Query::get_posts()
*
* @param array $args An array of arguments used to retrieve the recent posts.
*/
$r = new WP_Query( apply_filters( 'widget_posts_args', array(
'posts_per_page'      => $number,
'no_found_rows'       => true,
'post_status'         => 'publish',
'ignore_sticky_posts' => true
) ) );
if ($r->have_posts()) :
?>
<?php echo $args['before_widget']; ?>
<?php if ( $title ) {
echo $args['before_title'] . $title . $args['after_title'];
} ?>
<div id='right_new'>
<ul>
<?php while ( $r->have_posts() ) : $r->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
<?php if ( $show_date ) : ?>
<span class="post-date"><?php echo get_the_date(); ?></span>
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php echo $args['after_widget']; ?>
<?php
// Reset the global $the_post as this query will have stomped on it
wp_reset_postdata();
endif;
if ( ! $this->is_preview() ) {
$cache[ $args['widget_id'] ] = ob_get_flush();
wp_cache_set( 'widget_recent_posts', $cache, 'widget' );
} else {
ob_end_flush();
}
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = (int) $new_instance['number'];
$instance['show_date'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;
$this->flush_widget_cache();
$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['widget_recent_entries']) )
delete_option('widget_recent_entries');
return $instance;
}
public function flush_widget_cache() {
wp_cache_delete('widget_recent_posts', 'widget');
}
public function form( $instance ) {
$title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
$number    = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
$show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
?>
<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>
<p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of posts to show:' ); ?></label>
<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<p><input class="checkbox" type="checkbox" <?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label></p>
<?php
}
}

717行目あたりの次の部分がリストを出力している部分になるようです。

<?php while ( $r->have_posts() ) : $r->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
<?php if ( $show_date ) : ?>
<span class="post-date"><?php echo get_the_date(); ?></span>
<?php endif; ?>
</li>
<?php endwhile; ?>

レイアウト調整しやすいようにクラスを挿入して、だいたいこんな感じになりました。

<?php while ( $r->have_posts() ) : $r->the_post(); ?>
<li class='widgetNewItem'>
<div class='widgetNewItemImg'>
/*↓アイキャッチ画像を出力*/
<?php echo get_the_post_thumbnail(); ?>
</div>
<div class='widgetNewItemName'>
<a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
</div>
<?php if ( $show_date ) : ?>
<span class="post-date"><?php echo get_the_date(); ?></span>
<?php endif; ?>
</li>
<?php endwhile; ?>

Really simple CSV importer を使う

WordPressECサイト的に使う案件がありまして、いろいろ参考になった記事をまとめておきます。

https://wordpress.org/plugins/really-simple-csv-importer/ (開発者さま)
http://learn-from.net/csvimport/
http://blog.gti.jp/post-4033/
http://memocarilog.info/wordpress/theme-custom/3200

Custom Field Templateについて
http://make.mapmap.biz/plugins/37/
http://mypacecreator.net/blog/archives/642/2

ありがとうございました〜

機種を判別して内容を変更する

最近スマホの案件が増えてきました。
機種によって導線を変えることも多そうなのでここにメモを。。。

HTML

<!-- 初期設定はiosに。。。-->
<div id="download">
<a href="http://store.apple.com/" id="href_appdownload">
<img src="../img/bnr_dl_ios_a.png" id="btn_appdownload">
</a>
</div>

javaScript

/**
 *  UAを判定してダウンロードボタンの内容を変更する
 */
$(document).ready(function(){
var agent = navigator.userAgent;
var ua='';
if(agent.search(/iPhone/)!=-1){
ua = 'ios';
}else if(agent.search(/Android/)!=-1){
ua = 'android';
}else{
ua = 'pc';
}
if(ua == 'ios'){
;
}else if(ua == 'android'){
$("#href_appdownload").attr("href","http://play.google.com/");
$("#btn_appdownload").attr("src","../img/bnr_dl_android.png");
}else if(ua == 'pc'){
$("#href_appdownload").attr("href","");
$("#btn_appdownload").attr("src","../img/bnr_dl_pc.png");
}
});

スクロールに合わせて位置が変わるレフトメニュー

パララックスのお勉強

page.html

<html>
<head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='js/scrollMenu.js'></script>
</head>
<body>
<div id="page_bg">
<div id="header">
</div>
<div id="wrapper">
<div id="side_menu">
メニューの内容
</div>
<div id="contents">
コンテンツ
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

scrollMenu.js

/* ページの高さを取得する */
var pageheight = $('#page_bg').height();
/* レフトメニューの高さを取得する */
var menuheight = $('#side_menu').height();
/* レフトメニューの上端の位置を取得する */
var vsidemenu = $('#side_menu').offset().top;
/* フッターの上端の位置を取得する */
var vfooter = $('#footer').offset().top;
$(window).scroll(function() {
/* スクロールの位置を取得する */
var value = $(this).scrollTop();
/* スクロール値がメニュー上端の値より小さいときはそのまま */
if (value < vsidemenu) {
$('#side_menu').css('position', 'static');
/* 大きくなったら画面の上端に固定 */
}else if(vsidemenu < value) {
$('#side_menu').css('position', 'fixed');
$('#side_menu').css('top', 0);
}
/* フッターのところまで来たら重ならないように、スクロールに合わせて上へ移動 */
/* しきい値は(ページの高さ) - (メニューの高さ + フッターの上端)	 */
var shikii = pageheight - menuHeight - footerheight;
/* メニュー表示位置は(しきい値) - (メニューの高さ) */
var menutop = shikii - menuheight;
/* スクロール値がしきい値を超えたら、メニューの配置をrelativeにしてメニューの上端を固定する*/
if(value > shikii){
$('#side_menu').css('position', 'relative');
$('#side_menu').css('top', menutop);
}

z-indexが効かないとき

cssとjsで作ったトップメニューのプルダウンがどうしても下にあるdivの後ろに隠れてしまって表示されない。。。。いろいろ調べたところz-indexが効かない原因はこんな感じ

  • 親要素がposition:static;もしくはpositionが設定されてない
  • ほかにz-indexが設定されている
  • overflow:hidden;が設定されている

今回の原因は3でした。
ちなみにoverflow属性はコンテンツがdivに入りきらないときにどうするかを指定するもの
デフォルト値はvisibleです。hiddenははみ出た部分をバッサリ非表示にします。

こんなんで2,3時間。。。

TwentyThirteenをカスタム

Homeページのタイトルを消す

そのままだとホームページに指定したページのタイトルが表示されるのでこれを消します。
page.phpのなかの29行目くらいの次の部分がタイトルを表示させるところです

<h1 class="entry-title"><?php the_title(); ?></h1>

これの前に条件式をつけて特定のページではタイトルを表示させないようにします

<?php if(!is_page(4)): ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php endif; ?>

ページは番号で指定します。番号は編集ページのURLに含まれてます

http://hogehoge.com/en/wp-admin/post.php?post=4&action=edit&message=1

メニューの固定ページの表示順を指定する

ページ編集画面で