月別アーカイブ: 1月 2018

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; /* アイコンの場所を変えたければ適宜変更 */
}

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

これをfunction.phpに記述する

add_filter('widget_text', 'do_shortcode' );

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

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

コンテンツ量が多いページを作るときに、内容を隠してクリックでその下あたりに表示させたい時の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;
}

ウィジェットの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>

特定のカテゴリーだけ表示させるプラグイン

Recent posts of specific category

これ。

便利すぎ。
ウィジェットで最新の投稿一覧を出す時に特定のカテゴリだけを表示することが出来るよ!

WPウィジェット上の最新の投稿一覧で特定のカテゴリーを除外

これfunction.phpに入れとけ。

<?php

class WP_Widget_Recent_Posts_Exclude extends WP_Widget {

function __construct() {
$widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "The most recent posts on your site") );
parent::__construct('recent-posts', __('Recent Posts with Exclude'), $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') );
}

function widget($args, $instance) {
$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();
extract($args);

$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);
if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) )
$number = 10;
$exclude = empty( $instance['exclude'] ) ? '' : $instance['exclude'];

$r = new WP_Query(array('posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'ignore_sticky_posts' => true, 'category__not_in' => explode(',', $exclude) ));
if ($r->have_posts()) :
?>
<?php //echo print_r(explode(',', $exclude)); ?>
<?php echo $before_widget; ?>
<?php if ( $title ) echo $before_title . $title . $after_title; ?>
<ul>
<?php while ($r->have_posts()) : $r->the_post(); ?>
<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php echo $after_widget; ?>
<?php
// Reset the global $the_post as this query will have stomped on it
wp_reset_postdata();

endif;

$cache[$args['widget_id']] = ob_get_flush();
wp_cache_set('widget_recent_posts', $cache, 'widget');
}

function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = (int) $new_instance['number'];
$instance['exclude'] = strip_tags( $new_instance['exclude'] );
$this->flush_widget_cache();

$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['widget_recent_entries']) )
delete_option('widget_recent_entries');

return $instance;
}

function flush_widget_cache() {
wp_cache_delete('widget_recent_posts', 'widget');
}

function form( $instance ) {
$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
$number = isset($instance['number']) ? absint($instance['number']) : 5;
$exclude = esc_attr( $instance['exclude'] );
?>
<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>
<label for="<?php echo $this->get_field_id('exclude'); ?>"><?php _e( 'Exclude Category(s):' ); ?></label> <input type="text" value="<?php echo $exclude; ?>" name="<?php echo $this->get_field_name('exclude'); ?>" id="<?php echo $this->get_field_id('exclude'); ?>" class="widefat" />
<br />
<small><?php _e( 'Category IDs, separated by commas.' ); ?></small>
</p>
<?php
}
}

function WP_Widget_Recent_Posts_Exclude_init() {
unregister_widget('WP_Widget_Recent_Posts');
register_widget('WP_Widget_Recent_Posts_Exclude');
}

add_action('widgets_init', 'WP_Widget_Recent_Posts_Exclude_init');

?>

前から気になってたんだけど、WPテーマの中でfunction.phpとfunctions.phpがあるのは何故?????????

サブページなどページ毎にヘッダーなどを変える

使い所としては、サブページにはスライドショーを出したくない!グローバルメニューだけで良い!という時用です。
トップとサブページに同じテンプレートを適用すると、同じheader.phpが読まれてしまうのです。
なので、スライドショーを削除したheader.phpを作成する感じです。詳細は以下。

1. 異なるヘッダーを使用するページ用のpage-sub.phpを作成します。(subの部分は任意です)

2. page-new.php内の冒頭に下記の記述を行います。

<?php

/*
Template Name: サブページ用(とか)
*/

?>

3. 異なるヘッダーを使用するページ用のheader-sub.phpを作成します。

4. page-sub.php内に下記の記述をし、header-sub.phpを呼び出します。

<?php get_header(sub); ?>

5. page-sub.phpとheader-sub.phpをサーバ上のオリジナルテーマフォルダ内にアップロードします。

あとは固定ページのテンプレートで選べるようになるよ。

特定カテゴリーの記事一覧を出力

これphpファイルに書いておけばいいと思うよ。
固定ページに入れたいんだがってときは、外部phpファイルを固定ページに読み込むといいよ。
この記事読んでね。

<?php
$posts = get_posts(array(
'posts_per_page' => 2, // 表示件数
'category' => '4' // カテゴリIDもしくはスラッグ名
));
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>

<!--表示する内容が入ります。-->
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<p><?php the_time('Y/m/d') ?></p>
<p><?php the_excerpt(); ?></p>
<p><a href="<?php the_permalink() ?>">続きを見る</a></p>
<!--表示する内容ここまで-->

<?php endforeach; endif; ?>

白半透明背景の作り方

CSSのプロパティだよ。
RGBいじれば色が変わるよ。
1に近づくと色が濃くなるよ!

background-color:rgba(255,255,255,0.5);

╰(*´︶`*)╯

ヘッダーのナビを固定してあとからぬるっと出したいとか

スクロールしたら、ヘッダーのナビがあとからニュっと出てくるサイトあるよね。それ。

HTML

<header>

  ...

</header>

<nav>
...
</nav>

<main>
...
</main>

<footer>
...
</footer>

CSS

.clone-nav {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
transition: .3s;
transform: translateY(-100%);
}
.is-show {
transform: translateY(0);
}

JS

$(function() {

  var $win = $(window),

      $cloneNav = $('nav').clone().addClass('clone-nav').appendTo('body'),

      showClass = 'is-show';

$win.on('load scroll', function() {
var value = $(this).scrollTop();
if ( value > 700 ) {
$cloneNav.addClass(showClass);
} else {
$cloneNav.removeClass(showClass);
}
});
});

 

参考サイト

jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5