このサイトを作るためにやったことメモ。

サイト制作

★All In One SEO Packをインストール

★PageSpeed Insights対策

https://developers.google.com/speed/pagespeed/insights/?hl=ja

1. htaccessに以下を追加。

#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
#ブラウザキャッシュの設定
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
#フォント
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
#圧縮の設定
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
#フォント
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

2. Autoptimizeのプラグインをインストール。

高度な設定を表示、すべての CSS をインライン化

3. function.phpに以下を追加。

// スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;       //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url;       //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8";                      // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

★パーマリンク設定を変更

投稿名に変更。

★FontawesomeとgoogleフォントCDNをbodyの前に追加

★コメントを非表示に

★未分類のカテゴリーを削除

★カテゴリー一覧を取得、表示

<?php $cat_all = get_terms( "category", "fields=all&get=all" ); foreach($cat_all as $value): ?>
<h3>カテゴリー</h3>
<p><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></p>
<?php endforeach; ?>

★最近の投稿一覧を取得、表示

<?php $args = array('posts_per_page' => 5, 'offset' => 0, 'order' => 'DESC', 'orderby' => 'date'); $newpost_query = new WP_Query($args); ?>
<?php if ($newpost_query->have_posts()): ?>
<h3>最近の投稿</h3>
<ul>
<?php while ($newpost_query->have_posts()): $newpost_query->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if (has_post_thumbnail()): ?>
<?php the_post_thumbnail(array(100,100)); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" />
<?php endif; ?>
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

★人気の記事一覧を取得、表示

3. function.phpに以下を追加。

// 人気記事出力用
function getPostViews($postID){
	$count_key = 'post_views_count';
	$count = get_post_meta($postID, $count_key, true);
	if($count==''){
			delete_post_meta($postID, $count_key);
			add_post_meta($postID, $count_key, '0');
			return "0 View";
	}
	return $count.' Views';
}
function setPostViews($postID) {
	$count_key = 'post_views_count';
	$count = get_post_meta($postID, $count_key, true);
	if($count==''){
			$count = 0;
			delete_post_meta($postID, $count_key);
			add_post_meta($postID, $count_key, '0');
	}else{
			$count++;
			update_post_meta($postID, $count_key, $count);
	}
}
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

★メディア設定を投稿する画像に固定

★カテゴリーのスラッグを取得、表示

<?php 
$cat = get_the_category();
$cat = $cat[0];
?>
<?php echo $cat->category_nicename; ?>	

★ページネーション

以下をfunction.phpに

//レスポンシブなページネーションを作成する
function responsive_pagination($pages = '', $range = 4){
  $showitems = ($range * 2)+1;

  global $paged;
  if(empty($paged)) $paged = 1;

  //ページ情報の取得
  if($pages == '') {
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages){
      $pages = 1;
    }
  }

  if(1 != $pages) {
    echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
    //先頭へ
    echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
    //1つ戻る
    echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
    //番号つきページ送りボタン
    for ($i=1; $i <= $pages; $i++)     {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))       {
        echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
      }
    }
    //1つ進む
    echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
    //最後尾へ
    echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
    echo '</ul>';
  }
}

以下をindex.phpに

<?php if (function_exists('responsive_pagination')) {
  responsive_pagination($additional_loop->max_num_pages);
} ?>

前の記事、次の記事をサムネイル表示

nav-below-single.phpに以下を追加

<nav id="nav-below" class="navigation mb30" role="navigation">
<div class="diagonal clearfix">
<?php
$next_post = get_next_post();
if (!empty( $next_post )): 
$next_thum = get_the_post_thumbnail($next_post->ID, array() );
?>
<a href="<?php echo get_permalink( $next_post->ID ); ?>">
<div class="next-post">
<p class="next-postTL"><i class="fas fa-arrow-circle-left"></i></p>
<div class="post-thum">
<?php if($next_thum){ echo $next_thum; } ?>
</div>
<div class="post-info">
<p><?php echo $next_post->post_title; ?></p>
</div>
</div></a>
<?php endif; ?>
<?php
$previous_post = get_previous_post();
if (!empty( $previous_post )): 
$prev_thum = get_the_post_thumbnail($previous_post->ID, array() );
?>
<a href="<?php echo get_permalink( $previous_post->ID ); ?>">
<div class="prev-post">
<p class="prev-postTR"><i class="fas fa-arrow-circle-right"></i></p>
<div class="post-thum">
<?php if($prev_thum){ echo $prev_thum; } ?>
</div>
<div class="post-info">
<p><?php echo $previous_post->post_title; ?></p>
</div>
</div></a>
<?php endif; ?>
</div>
</nav>

wpemojiSettingsを削除

function.phpに以下を追加

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles', 10 );

wp-embed.min.js の削除

function.phpに以下を追加

remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');

//ついでにHTTPレスポンスも成形する

remove_action('template_redirect', 'rest_output_link_header', 11 );