メンバー一覧表をCSSで編集

2019/1/21 21:52:28作成
実際にこのプラグインUltimate Memberを利用してみるとメンバー一覧表の文字が小さく年寄りには確かに見辛い。大きくしたいがプラグインUltimate Memberは独自のCSSを利用している為、元となるテーマ名_childのstyle.cssでは編集できません。単純に直接プラグインUltimate Memberのcssを編集するか、ページごとにCSSを編集できるようにするかのいずれかです。プラグインは更新があり、その度に再編集するものどうかと考え、ページごとに編集することにしました。元となるテーマ名_child内のfunctiom.phpに以下のコードを追加することでページごとにCSSを編集することができるようになります。

functiom.phpに追加するコード
//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
    global $post;
    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
    echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
        endwhile; endif;
        rewind_posts();
    }
}


最終的にfunction.phpは次のようになりました。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
    global $post;
    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
    echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
        endwhile; endif;
        rewind_posts();
    }
}


//画像リンクのAタグをLightboxに対応するように付け替え
function add_lightbox_property( $content ) {
  //プレビューやフィードモバイルなどで遅延させない
  if( is_feed() || is_preview() )
    return $content;
   //既に適用させているところは処理しない
   if ( false !== strpos( $content, 'data-lightbox="image"' ) )
    return $content;
   //除外するページを指定し適用する
   if( is_page( array( 149,152 ) ) ){
   //Aタグを正規表現で置換
  $content = preg_replace(
    '/<a([^>]+?)>\s*(<img[^>]+?>)\s*<\/a>/',//Aタグの正規表現
    '<a${1} data-lightbox="image">${2}</a>',//置換する
    $content );//投稿本文(置換する文章)
   }   
   return $content;
}
add_filter( 'the_content', 'add_lightbox_property', 11 );
?>


投票数:24 平均点:2.08

趣味を楽しもう新着記事

欲しい商品が必ず見つかるメジャーなネットショップ

ログイン

Facebook,RSSリンク表示

検索

アクセスカウンタ

今日 : 298
昨日 : 249
総計 : 1616084