WordPress管理画面の抜粋のラベルを変更

WordPressでサイトを構築時、抜粋をディスクリプションとして使う機会があったので、管理画面の抜粋のラベルを変更する方法を調べてみました。ニッチな要望なのかあまり情報がなかったので、備忘録として書き記します。

抜粋のラベルを変更

functions.phpに以下を記述

//抜粋の名称変更
function post_excerpt_label() {
  global $wp_meta_boxes;  
  unset( $wp_meta_boxes['post']['normal']['core']['postexcerpt'] );
  add_meta_box(
    'postexcerpt',
    'ディスクリプション',
    'post_excerpt_meta_box',
    'post',
    'normal',
    'low'
  );
}
add_action( 'add_meta_boxes', 'post_excerpt_label', 0 );

//抜粋の名称変更

function post_excerpt_label() {

global $wp_meta_boxes;

unset( $wp_meta_boxes['post']['normal']['core']['postexcerpt'] );

add_meta_box(

'postexcerpt',

'ディスクリプション',

'post_excerpt_meta_box',

'post',

'normal',

'low'

);

}

add_action( 'add_meta_boxes', 'post_excerpt_label', 0 );

ラベル下のコメントをCSSで削除

functions.phpからラベル下のコメントを削除、もしくは変更できないものかと調べておりましたが、無理っぽそうだったので、管理画面にCSSを読み込んで削除することにしました。

functions.php

//管理画面にCSS読み込み
function custom_adm_css() {
    echo "\n" . '<link href="' .get_bloginfo('template_directory'). '/function.css' . '" rel="stylesheet" type="text/css" />' . "\n";
}
add_action('admin_head', 'custom_adm_css', 100);

//管理画面にCSS読み込み

function custom_adm_css() {

echo "\n" . '<link href="' .get_bloginfo('template_directory'). '/function.css' . '" rel="stylesheet" type="text/css" />' . "\n";

}

add_action('admin_head', 'custom_adm_css', 100);

css

@charset "utf-8";
textarea#excerpt + p{
	display: none;
}

@charset "utf-8";

textarea#excerpt + p{

display: none;

}

これで一応思った通りにできました。よかった。

2016年01月17日日曜日
：Naruhiko Wakai

Macで使用中のためゴミ箱の中ファイルを削除できませんのとき

年末にMacの大掃除を行っていてゴミ箱を空にしようとしたら「◯◯で使用中のため削除できません」的な警告が出た場合、再起動すれば大概は消せるんだれど、そのためだけに再起動するのもなんだかなとき

commandを押しながらゴミ箱を右クリック

commandを押しながらゴミ箱を右クリックして、「確実にゴミ箱を空にする」を選択すればOK。

これでスッキリ新年を迎えられます。

2015年12月31日木曜日
：Naruhiko Wakai

オブジェクトの取り扱いで仕上がりが変わる！レスポンシブデザイン、リキッドデザインの注意点

レスポンシブデザインやリキッドデザインでオブジェクトがぼやけて表示されているとなんだが残念な気分になります。そんな僕がレスポンシブデザインやリキッドデザインで特に気をつけているポイントをご紹介します。

可変するオブジェクトと固定するオブジェクトの見極め

オブジェクトがぼやけてしまう要因は大きく分けて次の二つです。

表示領域よりもオブジェクトが小さい
ピクセルがずれている

表示領域よりも画像などのオブジェクトが小さい

表示領域よりも小さい画像オブジェクトを綺麗に見せるための解決作は理屈的には簡単です。大きいオブジェクトに差し替えればいいだけです。とは言え、差し替える大きな画像が無い場合も多く存在するのでそんな簡単な問ではありません。

選択肢としては

現状維持
要素の差し替え
レイアウト変更

になります。クライアントの要望によってはデザイナーの腕だけでは解決できないポイントでもあります。

ピクエルがずれて表示がぼやける

ピクセルがずれて表示がぼやける問題は単にオブジェクトを大きくすれば解決するというほど単純な問題ではありません。Retinaディスプレイに対応するために大きめに画像を制作したが比率が合わなくて、ぼやけてしまうなどもよくある話です。

パスで制作されたオブジェクトと写真の扱い

パスで制作されたオブジェクトと写真の取り扱いは厳密に分けておいた方が無難です。その中でも利用頻度の高い「フォント」と「アイコン」は特に気をつけておきたいポイントです。

例えば、画像フォントを等倍のサイズのまま使用するとRetinaに対応していないディスプレイでは綺麗に表示されますが、Retinaに対応しているディスプレイでは倍の大きさでオブジェクトを使用する必要があります。

パスで制作されたオブジェクト

レスポンシブでよくある問題で倍比率にならない画像

Retinaのスマホでwidth300pxの画像
RetinaじゃないPCでwidth250pxの画像

この場合の正解は500pxの画像を用意する、もしくは別々の画像を用意するです。500pxで画像を制作しておくとPCでもRetinaディスプレイのスマホでも綺麗に見えます。

これがPCのwidth180pxスマホのwidth300pxなら完全に別画像で作った方が無難です360pxの画像を300pxで表示してもあまりRetinaでは綺麗に表示されません。かといって600pxの画像を用意してもPCでの表示がぼやけてしまいます。

別々の画像を用意すればワンソースと言うメリットをうまく活かせていない気もしますがjsで切り替えて別の画像に差し替えるのは許容範囲でしょう。

写真の場合

上記例の写真版の場合はRetinaサイズで制作しておけば通常のPCでも綺麗に表示されます。厳密には綺麗に表示されていないのですが、綺麗に見えるのでそこは厳密性を求めなくても大丈夫なポイントです。

パスで制作されたオブジェクトと写真とでは扱いが異なるのです。

あくまでも主役は情報

デザイン的に気をつけているポイントをご紹介しましたがあくまでもWebサイトの主役は情報ですので、合わせてモバイルファーストに即した情報配置にすることにも留意したいですね。

2015年11月29日日曜日
：Naruhiko Wakai

BLOG