jQueryを使用したスクロールすると表示されるpagetopアイコン

アイコンの画像を用意してページ右下に表示する

HTML

<a href="#top" class="pagetop"><img src="../img/pagetop.png" height="52" width="95" alt="PAGETOP"></a>

id="top"までスクロールするのでwrapperなどにidを指定しておく。

CSS

.pagetop {
  position: fixed;
  right: 20px;
  bottom: 0;
  width: 92px;
  height: 49px;
  display: block;
  z-index: 10;
}

position: fixed;でウインドウの右下に固定表示されるように指定する。

jQuery

//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が出きるんじゃないの? と考えてやってみましたが、ダメでした(笑)