kdcsライブラリー

WordPressの記事にyotubeを埋め込む場合、埋め込みタグをそのまま貼り付けると決まった固定サイズになる

これをレスポンシブに対応させるためにはyoutubeコードのiframeをdivで囲う必要があるのでfunction.phpに以下の記述を行う。

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');

これで「youtube」というクラスが付いたdivタグがiframeに付加される

あとはyoutubeというクラスにcssを記述する

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

横幅90%で中央配置にする場合

.youtube {
position: relative;
width: 90%;
margin: 0 auto;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

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

これを停止させる方法

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

// レスポンシブイメージ自動生成の無効化（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から実装された機能でimgタグに「srcset属性・sizes属性」が付く

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

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

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

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' );

デフォルトでは未入力でも下書き保存・公開ができてしまうので
必須入力の項目を指定し、未入力の場合はアラートを出す
function.php内に記述

デフォルトの投稿

function post_edit_required() {
?>
<script>
jQuery(function($) {
  if( 'post' == $('#post_type').val() ) {
    $('#post').submit(function(e) {
      // タイトル
      if ( '' == $('#title').val() ) {
        alert('タイトルを入力してください');
        $('.spinner').css('visibility', 'hidden');
        $('#publish').removeClass('button-primary-disabled');
        $('#title').focus();
        return false;
      }
      // コンテンツ（エディタ）
      if ( $('.wp-editor-area').val().length < 1 ) {
        alert('コンテンツを入力してください');
        $('.spinner').css('visibility', 'hidden');
        $('#publish').removeClass('button-primary-disabled');
        return false;
      }
      // 抜粋
      if ( '' == $('#excerpt').val() ) {
        alert('抜粋を入力してください');
        $('.spinner').css('visibility', 'hidden');
        $('#publish').removeClass('button-primary-disabled');
        $('#excerpt').focus();
        return false;
      }
      // カテゴリー
      if ( $('#taxonomy-category input:checked').length < 1 ) {
        alert('カテゴリーを選択してください');
        $('.spinner').css('visibility', 'hidden');
        $('#publish').removeClass('button-primary-disabled');
        $('#taxonomy-category a[href="#category-all"]').focus();
        return false;
      }
      // タグ
      if ( $('#tagsdiv-post_tag .tagchecklist span').length < 1 ) {
        alert('タグを選択してください');
        $('.spinner').css('visibility', 'hidden');
        $('#publish').removeClass('button-primary-disabled');
        $('#new-tag-post_tag').focus();
        return false;
      }
      // アイキャッチ
      if ( $('#set-post-thumbnail img').length < 1 ) {
        alert('アイキャッチ画像を設定してください');
        $('.spinner').css('visibility', 'hidden');
        $('#publish').removeClass('button-primary-disabled');
        $('#set-post-thumbnail').focus();
        return false;
      }
    });
  }
});
</script>
<?php
}
add_action( 'admin_head-post-new.php', 'post_edit_required' );
add_action( 'admin_head-post.php', 'post_edit_required' );

(続きを読む…)