wordpressで子カテゴリをリスト化する方法
カテゴリー内のサイドバー等でそのカテゴリーの子カテゴリーをリスト化する(ややこしいな……)記述
<?php $cat_now = get_the_category(); $cat_now = $cat_now[0]; wp_list_categories( "title_li=&child_of={$cat_now->term_id}&depth=1&show_count=1" ); ?>
jQueryを使用したスクロールすると表示されるpagetopアイコン
アイコンの画像を用意してページ右下に表示する
HTML
<a href="#top" class="pagetop"><img src="../img/pagetop.png" height="52" width="95" alt="PAGETOP"></a>
id="top"までスクロールするのでwrapperなどにidを指定しておく。
.pagetop { position: fixed; right: 20px; bottom: 0; width: 92px; height: 49px; display: block; z-index: 10; }
position: fixed;でウインドウの右下に固定表示されるように指定する。
//pagetop $(document).ready(function() { var pagetop = $('.pagetop'); $(window).scroll(function () { if ($(this).scrollTop() > 700) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); });
if ($(this).scrollTop() > 700) {
でスクロール距離を指定。この場合700pxスクロールするとpagetopボタンが表示される。
スマホサイト用headerコード
WordPressでのスマホサイト用headerコードです。
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <title> <?php if ( is_home() || is_front_page() ) : ?> <?php bloginfo('name'); ?> <?php else : ?> <?php the_title(); ?>| <?php bloginfo('name'); ?> <?php endif; ?> </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--CSS--> <link href=" <?php bloginfo('template_url'); ?>/css/sp-style.css" rel="stylesheet" > <!--googlefont--> <!-- font awesome --> <link href=" <?php bloginfo('template_url'); ?>/css/font-awesome.min.css" rel="stylesheet"> <!-- favicon --> <link rel="shortcut icon" href=" <?php bloginfo('template_url'); ?>/favicon.ico"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <?php wp_head()?> </head> <body> <noscript> <div class="no-script">サイトを快適に利用するためには、JavaScriptを有効にしてください。</div> </noscript> <div class="wrapper"> <nav id="menu"> <ul> <li> <a href="">カテゴリ</a> </li> <li> <a href="">カテゴリ</a> </li> <li> <a href="">カテゴリ</a> </li> <li> <a href="">カテゴリ</a> </li> <li> <a href="">カテゴリ</a> </li> <li> <a href="">カテゴリ</a> </li> <li> <a href="">カテゴリ</a> </li> <li> <a href="">カテゴリ</a> </li> </ul> </nav>
■
wp_is_mobileではipadで表示した際にモバイルサイトを表示してしまうので、is_mobileという関数を作成し、ipadではPCバージョンを表示するように設定する。
以下の記述をfunctions.phpに記述
//スマホ表示分岐、ipadではPC版を表示する function is_mobile(){ $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android.*Mobile', // 1.5+ Android *** Only mobile 'Windows.*Phone', // *** Windows Phone 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry9500', // Storm 'blackberry9530', // Storm 'blackberry9520', // Storm v2 'blackberry9550', // Storm v2 'blackberry9800', // Torch 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); }
WordPressで総ページ数と現在のページ数を取得する方法
WordPressで総ページ数と現在のページ数を取得するための方法
functions.phpに記述。
functions.phpは記述ミスに注意。
//現在のページ数の取得 function show_page_number() { global $wp_query; $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $max_page = $wp_query->max_num_pages; echo $paged; } //総ページ数の取得 function max_show_page_number() { global $wp_query; $max_page = $wp_query->max_num_pages; echo $max_page; }
これで
<?php show_page_number(''); ?>
で現在のページ数を表示して
<?php max_show_page_number(''); ?>
これで総ページ数を表示することができる。
オンラインでpng画像を縮小してくれるtinypng
web上でpng画像を縮小してくれるhttps://tinypng.com/というサイトが便利なのでメモ。
https://tinypng.com/
70パーセントほど縮小してくれます。
縮小を繰り返せばめちゃくちゃ軽いpngが出きるんじゃないの? と考えてやってみましたが、ダメでした(笑)