スクロールしてもグローバルナビを上部で固定する(レスポンシブ)

Filed under: css,JavaScript,レスポンシブデザイン — kdcs @ 2018年2月9日 金曜日

スクロールしてもグローバルナビを上部で固定する(jQuery使用)
pcで表示の場合のみ固定し、モバイル表示の時はslicknavを表示する

ページhtml
※ナビ固定分の縦幅の起点のため空のdivタグ#navFixedを入れる
モバイル表示の際は、このdivタグは非表示処理(display: none;)する

<div id="nav">
ナビ記述・・・
</div><!--/#nav-->

<div id="navFixed"></div>
<div id="main">
メインコンテンツ・・・
</div><!--/#main-->

css

#nav { text-align: center; background: #2f62c5; }
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/* スマホ対応
---------------------------------------------*/
@media only screen and (max-width: 780px) {
#nav {
  display: none;
  }
div#navFixed { display: none; }
}

javascript

//ナビ スクロール固定 --------------------------------------
$(function() {
  var $win = $(window),
      $main = $('#navFixed'),
      $nav = $('#nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

WordPress 404ページ

Filed under: wordpress — kdcs @ 2018年1月16日 火曜日

WordPress では該当するページがない場合、優先的に index.php が表示されるようになっているので

<?php get_header(); ?>
<div id="content">
<h2>指定されたページは存在しませんでした。</h2>
<p>このページの URL :
<span class="error_msg">
http://<?php echo esc_html($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']); ?>
</span></p>
<p>現在表示する記事がありません。</p>
<p><a href="<?php echo home_url(); ?>">トップページへ戻る</a></p> 
</div>
<?php get_footer(); ?>

エラーメッセージを出し、表示中のページの URL を「echo esc_html($_SERVER[‘SERVER_NAME’].$_SERVER[‘REQUEST_URI’]);」で出力。最下部にトップページへ戻るリンクを出力

エラーが出ても 404.php でページが生成されない場合があるので、.htaccess に「ErrorDocument 404 /index.php?error=404」という設定を追加する。
※WordPress をサブディレクトリにインストールしている場合は、「ErrorDocument 404 /サブディレクトリ名/index.php?error=404」という形で指定する必要がある。
.htaccessファイル

# BEGIN WordPress
・・・省略・・・
# END WordPress
ErrorDocument 404 /index.php?error=404

WordPress 4.4以降の自動生成レスポンシブ用画像とsrcset挿入を停止

Filed under: functions.php,wordpress — kdcs @ 2018年1月15日 月曜日

WordPress 4.4以降の機能としてレスポンシブ用の画像(幅768px固定)が勝手に生成され
imgタグに「srcset」が自動的に追加される。

これを停止させる方法

画像の生成を停止
function.phpに以下を記述し、WordPressを1度リロードさせる

// レスポンシブイメージ自動生成の無効化(WordPress4.4以降)-------------------------------
update_option( 'medium_large_size_w', 0 );

その後この記述は削除してもかまわない

imgタグに入るsrcの自動挿入を停止

// レスポンシブイメージsrcset挿入の無効化(WordPress4.4以降)-----------------------------
add_filter( 'wp_calculate_image_srcset', '__return_false' );

WordPress 4.4からのレスポンシブイメージ機能を無効化する

Filed under: functions.php,wordpress — kdcs @ 2018年1月10日 水曜日

WordPress 4.4から実装された機能でimgタグに「srcset属性・sizes属性」が付く

この機能は投稿の編集画面には出ないのでテキストエディタ上には表示されない。
公開したページが表示されるタイミングで自動的に付加される仕様

この機能を無効化するにはfunction.phpに以下を記述

// レスポンシブイメージ機能の無効化(WordPress4.4以降)-----------------------------------
add_filter( 'wp_calculate_image_srcset', '__return_false' );

WordPress カテゴリーの選択をチェックボックスからラジオボタンに変更する

Filed under: functions.php,wordpress — kdcs @ 2018年1月9日 火曜日

WordPress カテゴリーの選択をチェックボックスからラジオボタンに変更すると同時に
「新規カテゴリーを追加」と「よく使うもの」を非表示にする

function.php内に記述 例:カスタム投稿タイプは「information」タクソノミーは「information_category」
以下はデフォルト投稿とカスタム投稿を併用する場合。

// お知らせカテゴリーの選択をラジオボタンに変更-------------------------------------------
function change_category_to_radio() {
echo "<script>
jQuery(function($) {
    // カテゴリーをラジオボタンに変更
    $('#categorychecklist input[type=checkbox]').each(function() {
        $(this).replaceWith($(this).clone().attr('type', 'radio'));
    });
    $('#information_categorychecklist input[type=checkbox]').each(function() {
        $(this).replaceWith($(this).clone().attr('type', 'radio'));
    });
    // 「新規カテゴリーを追加」を非表示
    $('#category-adder').hide();
    $('#information_category-adder').hide();
    // 「よく使うもの」を非表示
    $('#category-tabs').hide();
    $('#information_category-tabs').hide();
});
</script>"; }

add_action( 'admin_head-post-new.php', 'change_category_to_radio' );
add_action( 'admin_head-post.php', 'change_category_to_radio' );

サイト内検索

カテゴリー

最近の投稿

↑上に戻る