kdcsライブラリー

headタグ内に記述されるwp_headからは各種のコードが出力されるが、
不要なものオリジナルテーマの記述で重複してしまうものもある。
これらを削除するには以下をfunction.phpに記述する。

※プラグイン「welcart」ではwp_headで出力するjQueryを停止させるとwp_footerで読み込む仕様になっているみたい。
そこで、wp_head、wp_footerともjQueryを出力させたくない場合は、
add_action内の’wp_enqueue_scripts’を’init’にする。

// wp_head関連 wp pluginsバージョン情報を非表示にする-------------------------------------
remove_action('wp_head','wp_generator');
function remove_cssjs_ver2( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver2', 9999 );
add_filter( 'script_loader_src', 'remove_cssjs_ver2', 9999 );
// wp_head関連 ogpプロパティを非表示にする------------------------------------------------
remove_action( 'wp_head', 'usces_action_ogp_meta');
// wp_head関連 絵文字を非表示にする-------------------------------------------------------
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_filter('the_content_feed', 'wp_staticize_emoji');
remove_filter('comment_text_rss', 'wp_staticize_emoji');
remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
// wp_head関連 canonicalを非表示にする----------------------------------------------------
remove_action( 'wp_head', 'rel_canonical' );
// wp_head関連 コメントのフィードを非表示にする-------------------------------------------
remove_action('wp_head', 'feed_links_extra', 3);
// wp_head関連 rel="prev"とrel="next"を非表示にする---------------------------------------
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');
// wp_head関連 投稿ツール'EditURIとwlwmanifest'を非表示にする-----------------------------
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
// wp_head関連 oembedを非表示にする-------------------------------------------------------
remove_action('wp_head','wp_oembed_add_discovery_links');
// wp_head関連 shortlinkを非表示にする----------------------------------------------------
remove_action('wp_head', 'wp_shortlink_wp_head');
// wp_head関連 wp-json'https://api.w.org/'を非表示にする----------------------------------
remove_action('wp_head','rest_output_link_wp_head');
// wp_head関連 dnsプリフェッチを非表示にする----------------------------------------------
function remove_dns_prefetch( $hints, $relation_type ) {
	if ( 'dns-prefetch' === $relation_type ) {
		return array_diff( wp_dependencies_unique_hosts(), $hints );
	}
	return $hints;
}
add_filter( 'wp_resource_hints', 'remove_dns_prefetch', 10, 2 );
// wp_head関連 wp_headでjQueryを読み込ませない--------------------------------------------
function my_delete_local_jquery() {
if (!is_admin()){
    wp_deregister_script('jquery');
  }
}
add_action( 'wp_enqueue_scripts', 'my_delete_local_jquery' );

検索エンジンにインデックスさせるのを拒否するmeta robotsの削除

// wp_head関連 robotsを非表示にする-------------------------------------------------------
remove_action('wp_head', 'noindex', 1 );

※デバッグモードにて
「Notice: wp_deregister_script が誤って呼び出されました。管理画面では jquery スクリプトの読み込みをオフにしないでください。フロントエンドテーマだけをターゲットにするには、wp_enqueue_scripts フックを使いましょう。」と出るので45行目あたりを修正。
if(!is_admin()が無くても動作するみたい・・・
2020.1.21 記

オリジナルテーマを作成するときにheadタグ内にwp_head();を記述した場合、
ワードプレスのバージョン他、各種情報やプラグインなどのcssが出力される。

ワードプレスのバージョンやプラグインなどの=?varを非表示にしたいときは
function.phpに以下を記述する

// wp pluginsバージョン情報を非表示にする--------------------------------------------------
remove_action('wp_head','wp_generator');
function remove_cssjs_ver2( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver2', 9999 );
add_filter( 'script_loader_src', 'remove_cssjs_ver2', 9999 );

divタグで囲った画像の下部に出る微妙な余白を無くす方法。

画像はインライン要素なのでベースラインをvertical-alignをbottom（下端揃え）にすると下の余白が無くなる
vertical-align: bottom;

img{
margin: 0;
padding: 0;
vertical-align: bottom;
}

または、display: block;

img{
margin: 0;
padding: 0;
display: block;
}

display:blockで画像をブロック要素にするとtext-alignでの中央寄せが効かなくなるので中央寄せしたい時はmargin: 0 auto;を指定する必要がある。

レスポンシブWebデザインで画像を扱う際にCSSのメディアクエリーを使用するのと同じ要領で表示させる画像を指定できる。

    <picture>
      <source media="(max-width: 768px)" srcset="./images/img-sp.gif">
      <img src="./images/img-pc.gif" alt="">
    </picture>

pictureタグで囲い、sourceタグのmedia属性で切り替えポイントを指定する。
上記の場合、横幅768px以下はimg-sp.gifを表示し、その他はimg-pc.gifを表示。

img要素の後に書かれたsource要素はすべて無視されるため最後にimgタグで画像を指定する。

ブラウザがpicture要素をサポートしていない場合は自動的にimg要素の画像が表示される。
※IEは対応していない

前記事の「疑似要素「::before」を利用した画像固定」はスマホでも使えるが、1か所限定。
1枚の画像をずっと固定したままで動きがない。

今回試したのは「position: sticky;」スティッキー
例によってIEでは機能しないがスマホで使える。

Safariやios対策 -webkit-sticky display: blockまたはflexは必須
css

.inner { max-width: 1080px; margin: 0 auto; }

#content {
    margin: 0 auto;
    text-align: center;
}

.block {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
p {
  display: inline-block;
  font-size: 60px;
  font-family: 'Great Vibes', cursive;
  padding: 0;
  margin: 0;
}
img {
  width: 100%;
  height: auto;
}
.block-one {
  background: #212E32;
  color: #fff;
  z-index: 500;
}
.block-two {
  background: #85937A;
  z-index: 400;
}
.block-three {
  background: #212E32;
  color: #fff;
  z-index: 300;
}
.block-four {
  background: #85937A;
  z-index: 200;
}
.block-five {
  background: #212E32;
  color: #fff;
  z-index: 100;
}

html

<section>
<div id="content">
<div id="contentArea" class="inner clearfix">

  <div class="block block-one">
    <p>One</p>
  </div>
  <div class="block block-two">
    <div>Two<br><img src="./images/sample.jpg"></div>
  </div>
  <div class="block block-three">
    <p>Three</p>
  </div>
  <div class="block block-four">
    <p>Four</p>
  </div>
  <div class="block block-five">
    <p>Five</p>
  </div>

</div><!--/contentArea-->
</div><!--/content-->
</section>