メンバー一覧表を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に追加するコード
最終的にfunction.phpは次のようになりました。
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 );
?>
投票数:33
平均点:1.82
