2020-12-09

【アップデート情報】全テーマ:ブロックエディター埋め込みブロックのレスポンシブ対応、その他コードの軽量化・追加修正を行いました

重要度★★☆

ご利用ありがとうございます!

全テーマのアップデートを行いました。
Gutenberg(ブロックエディター)の埋め込みブロックのレスポンシブ対応、
不要なコードを削除して軽量化、コードの追加修正です。

以下、コピペのみで修正可能です。

1)YouTube・Twitter・Instagramなど、埋め込みコードのレスポンシブ対応

ブロックエディターで埋め込みコードを貼り付ける際に、
綺麗にレスポンシブ対応して表示されるようになります。

ダッシュボード>外観>テーマエディター>テーマのための関数 (functions.php)
に以下を追加してください(空いてる場所のどこでも大丈夫です)。

/* ************************************************ 
*	レスポンシブ埋め込み
* ************************************************ */

add_theme_support( 'responsive-embeds' );

 

ダッシュボード>外観>テーマエディター>スタイルシート (style.css)
から以下の部分を削除してください(スタイルシートの最後の方にあります)。

/* YouTube URL貼り付け用
---------------------------------------------------- */

.wp-block-embed-youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.wp-block-embed-youtube iframe,
.wp-block-embed-youtube object,
.wp-block-embed-youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* YouTube 埋め込みブロック(Gutenberg)用
---------------------------------------------------- */

.wp-block-embed__wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

 

2)functions.php から不要コードの削除

これはどっちでもよい内容なのですが、無くても良いかな、ということで削除します。

ダッシュボード>外観>テーマエディター>テーマのための関数 (functions.php)
から以下の2ブロックを削除してください。

 

/* ************************************************ 
*	ヘッダータグの消去
* ************************************************ */

remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
remove_action('wp_head', 'feed_links_extra',3,0);
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'rel_canonical');


/* ************************************************ 
*	セルフピンバック禁止
* ************************************************ */

function no_self_ping( &$links ) {
$home = home_url();
foreach ( $links as $l => $link )
if ( 0 === strpos( $link, $home ) )
unset($links[$l]);
}
add_action( 'pre_ping', 'no_self_ping' );

 

3)header.phpにコードの追加

ダッシュボード>外観>テーマエディター>テーマヘッダー (header.php)
の16行目前後にある、<body <?php body_class(); ?>>の次の行に、
以下のコードを1行追加してください。

<?php wp_body_open(); ?>

*何らかの事情でWordPress 5.2未満をご利用中の場合は追加しないでください。
 

4)コードの修正(置き換え)

ダッシュボード>外観>テーマエディター>テーマヘッダー (header.php)
ダッシュボード>外観>テーマエディター>テーマフッター (footer.php)
ダッシュボード>外観>テーマエディター>個別投稿 (single.php)
ダッシュボード>外観>テーマエディター>XXXXXXX固定ページテンプレート (single-XXXXXX.php)
内にある以下のコードをコピペで置き換えしてください。

<?php echo home_url(); ?>


<?php echo esc_url( home_url( '/' ) ); ?>

 

*エディターアプリにコード全体をコピーしてから、
「検索・置き換え機能」を使って機械的に行うと簡単&確実です。

以上です。

*本日2020年12月9日19:20以降のダウンロードファイルは変更済みです。

*作業を行なう際は、万が一間違えてもすぐに元に戻れるように、
必ず必ず必ずバックアップを取ってから慎重に行ってください!

おすすめWordPressテーマ10選
by