✌️
WordPressのちょっとしたテクニックまとめ
wordpressでサイト制作を行う上で、カスタム投稿やwordpressの独自関数など備忘録的にまとめていきます。
自分の中で「あれ、これってどうやるっけな…」みたいな、調べたらすぐ出てくるけど覚えるほどでもない。みたいなものをどんどん追加していけたらと思っています。
まとめ方もいつの間にか変わっているかもですが、、覚えるほどではないものをまとめて欲しかった！という人はぜひ活用ください🤤
簡単な呼び出し編
画像URL等の取得
cssやimgのプルパスで記述するときに使用
<?php echo get_template_directory_uri(); ?>
ショートコードの呼び出し
mwwp formやcontact-form7などのショートコードを埋め込む時に使用
<?php echo do_shortcode('[ショートコードの文字列]'); ?>
投稿の日付を取得
the_date（） でも取得できるが、前後の投稿と同じ日付だと表示されなかったりするのでこっちがオススメ
<?php the_time('Y.m.d'); ?>
functions.php へ追記編
記事のURLを連番にする
パーマリンク設定をIDにしちゃえばいいんだけど、それだと全ての投稿ごとに連番にならなかったりするので…
/* 投稿記事のスラッグをID番号で採番 */
function custom_auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
if ( $post_type == 'ポストタイプを記入' ) {
$slug = $post_ID;
}
return $slug;
}
add_filter( 'wp_unique_post_slug', 'custom_auto_post_slug', 10, 4 );
自動アップデートの停止
意図的に自動アップデートさせたくない時に😩
//自動更新を無効にする
add_filter( 'automatic_updater_disabled', '__return_true' );
wp_head（） で読み込まれる不要なファイルを読み込まないようにする
ページスピード改善などでよく出る、どこでそんなjsファイル読み込んでる！？みたいなのをまとめて読み込まないようにしてくれます。
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'wp_shortlink_wp_head' );
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' );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'noindex', 1 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10 );
remove_action( 'wp_head', 'feed_links_extra', 3);
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 );
function my_delete_head() {
wp_deregister_script( 'jquery' );
wp_deregister_script( 'dashicons' );
wp_deregister_style( 'contact-form-7' );
}
add_action( 'wp_enqueue_scripts', 'my_delete_head' );
カスタム投稿編
基本的にカスタム投稿を作る際、「CPT-UI」と「ACF(Advanced Custom Fields)」を使用してわちゃわちゃしてます。
同じだよーって人には役に立つかもです！！
タクソノミーの取得
//属する記事があるものだけ取得
get_terms('タクソノミー名');
//属する記事がなくても全てのものを取得
get_terms('タクソノミー名','hide_empty=0');
記事内容を文字数制限して一覧表示させる
//デフォルトのテキストエディタの場合
<?php
if(mb_strlen($post->post_content,'UTF-8')>73){
$content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content),0, 73,'UTF-8'));
echo $content.'……';
}else{
echo str_replace('\n', '', strip_tags($post->post_content));
}
?>
//カスタム投稿のテキストエリアの場合
<?php if(mb_strlen(get_field('フィールド名'))>73) {
$hoge= mb_substr(get_field('フィールド名'),0,73) ;
echo $hoge.'…';
} else {
echo get_field('フィールド名');
}
?>
カスタム投稿の取得と一覧表示
ページネーションが必要ない場合はその部分は削除して使ってください。
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'paged' => $paged,
'post_type' => 'test-post', //①カスタム投稿名 (通常の「投稿」はpost)
'taxonomy' => 'test-cat', //②タクソノミー名を指定 (通常の「投稿」はcategory)
'field' => 'slug', //'term_id'、'slug'など、次の term を指定するフィールド名を指定
'term' => 'test', //③タームを指定
//'terms' => array('test','test2'), //③タームを指定 (複数の場合)
'posts_per_page' => 6, //表示数を指定
);
$the_query = new WP_Query($args); if($the_query->have_posts()):
while ($the_query->have_posts()): $the_query->the_post(); ?>
<!-- 内容を記載 -->
<?php endwhile;
wp_reset_postdata(); ?>
<div class="pnavi">
<?php //ページリスト表示処理
global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
$paginate_format = '';
$paginate_base = add_query_arg('paged','%#%');
}else{
$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
user_trailingslashit('page/%#%/','paged');
$paginate_base .= '%_%';
}
echo paginate_links(array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $the_query->max_num_pages,
'mid_size' => 1,
'current' => ($paged ? $paged : 1),
'prev_text' => '< 前へ',
'next_text' => '次へ >',
)); ?>
</div>
<div class="list-link">
<a class="link-btn opa anime" href="<?php echo home_url(); ?>">トップへ</a>
</div>
<?php else: ?>
<p>現在、投稿がありません</p>
<?php endif; ?>
ACFの繰り返しフィールドの出力
<?php if(have_rows('repeater_field_name')): ?>
<?php while(have_rows('repeater_field_name')): the_row(); ?>
<?php the_sub_field('sub_field_name'); ?>
<?php endwhile; ?>
<?php endif; ?>
カスタム投稿の詳細を生成させない方法
カスタム投稿を追加した際に一覧を使用して各投稿の詳細ページは使用しない場合でも、wordpressでは記事として自動生成してしまうため、SEO的よくありません。。。
function.phpへ追記で生成しないようになります。
// 不要な詳細ページを生成させない（post_typeのところをカスタム投稿のスラッグにする）
add_filter('post_type_rewrite_rules', '__return_empty_array');
// 例
add_filter('faq_rewrite_rules', '__return_empty_array');
.htaccess編
httpsへのリダイレクト(wwwなしに統一)
wordpressなら管理画面の設定でできるので、無理にこれを使う必要はないけど😩
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [L,R=301]
webp画像の出しわけ
webp画像があれば出す。なければ通常の画像を出すのをこれを追記するだけでやってくれます。
（プラグインを使用する場合は必要なし）
# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
# Rewriteモジュールを有効にする
RewriteEngine On
# WebP対応ブラウザはAcceptリクエストヘッダにimage/webpを含む慣例
# その場合のみ後続のRewriteRuleを適用する
RewriteCond %{HTTP_ACCEPT} image/webp
# 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する
RewriteCond %{SCRIPT_FILENAME}.webp -f
# *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.webpでも可)
# Content-Typeはimage/webpにする
RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>
# 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す設定
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
# WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定(CDN対策)
# Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する
<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=_image_request
</IfModule>
WordPressのテーマ作成時にやっておきたいこと
管理画面から設定できる「右寄せ」「中央揃え」などのCSSは定義しておく
管理画面から記事投稿などをすると右寄せや文字サイズ、見出しなどの設定が可能です。
ですが、これも定義しておかないと正しく反映されないのであらかじめ定義しておきましょう
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
.alignright {
float: right;
margin-bottom: 20px;
margin-left: 20px;
}
.alignleft {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.wp-caption,
[class*='wp-image'] {
display: block;
max-width: 100% !important;
margin-top: 1.5em;
text-align: center;
}
.wp-caption-text {
margin-top: 0;
}
Discussion