WordPress のよくあるカスタマイズコード functions.php 多め

Posted under - WordPress

70

WordPress のテーマを自作するときに、よく使っているコードのまとめです。主に functions.php に書いている基本的なコードばかりです。私は仕事で Webサイトを作っているので、後半はクライアントさん向けの Webサイト用コードです。

WordPress

私、Evernote を使ってるんですけど、WordPress をカスタマイズするコード … たくさんクリップしてあって、ちょっとごちゃごちゃしてきたので整理しました … X( その中から一般的に使えるコードだけまとめてみました。個人的によく使うコードなど、一カ所にまとめておきたいなーと思ったのでメモ書きです。全部 WordPress 3.2 になってから、テスト済みです。

WordPress のよくあるカスタマイズ 目次

  1. セッティング関連
  2. ソーシャルボタンを追加
  3. 抜粋表示、the_excerpt 関連
  4. タイトルの文字数を制限して表示する
  5. 特定の文字をリンクとかにする
  6. サイドバーのカテゴリーリストにアイコンを付けたい
  7. ファビコンを表示する
  1. カスタムフィールドをループ外で使いたい
  2. 検索結果から指定したページを削除
  3. RSS feedの抜粋配信に画像を追加
  4. 管理画面にもファビコンをつけたい
  5. HTML エディタのフォントを変えたい
  6. 記事によって独自のCSSを使いたい
  7. クライアントさん向け?のカスタマイズ

1. セッティング関連

セッティングって言うと大げさですけど、WordPress で Webサイトを作るときにチェックしてることなどです。

1.1. アップロードできるファイルサイズを変更する

アップロードできるサイズ … 画像しかアップロードしなければ、それほど大きくする必要もないんですけど、他のブログなどから全ての記事をインポートする時など、ちょっとファイルサイズが大きくなる場合があります。

そんな時は、アップロードできるファイルサイズを大きくしなくてはなりません。でもこれは、WordPress で設定するんじゃなくて、サーバー側の問題。なので、基本的には php.ini でアップロードできるサイズを変更します。

アップロード最大サイズ

php.ini
upload_max_filesize = 32M
post_max_size = 64M
/* エラー表示 */
display_errors = Off

upload_max_filesize を変更します … 。何もいじってないと、8M がデフォルトなのかな?また、post_max_size も合わせてチェックしておきます。upload_max_filesize を変更しても、post_max_size がそれより小さいとダメなので …。

余談ですけど、ついでに display_errors もチェック。テーマの制作中は On でもいいかもしれませんが、公開したら Off にしてます …。

私はいつも直接 php.ini に書いてますが、中には php.ini を編集できない場合もあるかも。そんな時は次のように .htaccess に書くやり方もあるそうです(教えてもらったんですけど、まだ私はやったことがないので参考ということで)。

.htaccess
php_value upload_max_filesize 32M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

1.2. セルフピンバックの禁止

WordPress は、記事の中で他のブログなどのリンクを貼ると、自動でトラックバックを送る機能がついています(ピンバック)。でもこのピンバック、自分のブログの過去記事にリンクを貼っても機能してしまいます(セルフピンバック)。これがイヤだなーと思ってる人も多いみたいですねー。

なのでセルフピンバックを停止しちゃいます。functions.php に以下を追加します。

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

このピンバック機能は、設定 → ディスカッション で停止することもできます。

ディスカッション設定

ディスカッション設定

「この投稿に含まれるすべてのリンクへの通知を試みる」のチェックを外すと、ピンバックを停止します。

1.3. テーマサポート

WordPressには、デフォルトの機能としてついているものの、最初から表示されていないものもあります。そんなテーマサポートを有効にしておく為に、functions.php に以下を書き加えます。

1. アイキャッチ画像を使えるようにする

投稿画面でアイキャッチ画像を使えるようにしておきます。

アイキャッチ画像

アイキャッチ画像

アイキャッチ画像機能を有効に!

functions.php
add_theme_support( 'post-thumbnails' );

index.php などでアイキャッチを表示する時は、以下のように書きます。

ex – index.php
<?php the_post_thumbnail(); ?>
2. ページで抜粋を使う

デフォルトでは、固定ページで抜粋を使うことができません。必要なら有効にしておきます。

固定ページで抜粋

固定ページでも「抜粋」が利用できます!

functions.php
add_post_type_support( 'page', 'excerpt' );

index.php などで抜粋を表示する時は、以下のように書きます。

ex – index.php
<?php the_excerpt(); ?>
3. カスタムメニュー

WordPress 3.1 から新たにできた新機能、カスタムメニュー。これを使いたい場合は functions.php に以下を追記します。

カスタムメニュー

カスタムメニューを利用できるようにしておく。

functions.php
add_theme_support( 'menus' );

header.php など、ナビを出したい部分には以下を書きます。

ex – header.php
<?php wp_nav_menu(); ?>
4. RSS feed のリンクを表示する

RSS feed のリンクを <head> 内に出力します。WordPress 3.0 以降はテーマサポートで出力するようになったんですね!

functions.php
<?php add_theme_support('automatic-feed-links'); ?>

2. ソーシャルボタンを追加

カスタマイズという程ではないけれど、WordPress に Google+1FacebookTwitterのボタンを追加するコードです。

2.1. Google+1ボタン

Google +1 ボタン

以下の Javascript コードを </body> タグ直前に書きます。

HTML
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

次にボタンを表示したい部分に、以下を追加します。

XHTML
<g:plusone size="tall"></g:plusone>

size=”tall” は、ボタンの形です。ボタンの形は全部で4種類。

ボタンの種類
  • small 15px
  • medium 20px
  • tall 60px

左記の 3つを指定できます。size を書かない時は標準のボタンの形(24px)になるそうです!

でも上記のように書くと、HTML5 の場合は構文エラーが出てしまいます。なので以下のように書きます。

HTML5
<div class="g-plusone" data-size="standard" data-count="true"></div>

2.2. Facebookのいいね!ボタン

いいね!ボタン

まずは Facebook DEVELOPERS から、好きなサイズなどを選んでコードを取得します。この時、URL は適当に入れておきます。すると、例えば以下のようなコードができます!

HTML
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=245281502167818&amp;xfbml=1"></script>
<fb:like href="http://webdesignrecipes.com/" send="true" layout="box_count" width="450" show_faces="true" font=""></fb:like>

あとは URL(上記の場合は http://webdesignrecipes.com/ の部分) を記事の URL を出力するテンプレートタグ、<?php the_permalink();?> に変更してあげてば OK です!

変更後
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=245281502167818&amp;xfbml=1"></script>
<fb:like href="<?php the_permalink();?>" send="true" layout="box_count" width="450" show_faces="true" font=""></fb:like>

2.3. ツイッターのツイートボタン

ツイートボタン

こちらも基本的には facebook のいいね!ボタンと同じです。ツイッターの公式サイトからコードを取得して、WordPress のテンプレートタグに書き換えます。

また、上記のページでは、フォローボタンなども簡単に作成することができます!

3. 抜粋表示、the_excerpt 関連

WordPress の記事の投稿画面で、more ボタンを押して <!--more--> を挿入すれば、トップページなどで全文表示せずに、続きを読む … 的に表示すること可能ですよね!でも私は、すぐに more ボタンを押すのを忘れてしまう方なので、トップページなどでは the_excerpt – 抜粋を使っています。その the_excerpt 関連の tips です。

the_excerpt

3.1. the_excerptの […] を消したり、他の文字にする

抜粋 the_excerpt で文字を出力すると、最後に […] という文字列がつきます。これがイヤなので、消しちゃいます。functions.php に以下を追加するだけです。

functions.php
function new_excerpt_more($more) {
      return ''; 
}
add_filter('excerpt_more', 'new_excerpt_more');

return '・・・' という風にすると、[…] じゃなくて、指定した文字 ・・・ になります。

3.2. 抜粋に続きを読むをつける

the_excerpt で抜粋表示にすると、続きを読むというリンクが表示されません。このブログ – Webデザインレシピではもともと表示してませんが …。

続きを読むリンク

the_excerpt でも「続きを読む」リンクを表示したい場合には、functions.php に以下を追加します。さっき紹介したコードの改良版です。

functions.php
function new_excerpt_more($more) {
     return ' ... <a class="more" href="'. get_permalink() . '">続きを読む</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

3.3. 抜粋の文字数を変更する

抜粋で表示する文字数を変更したいなーという時もあります。WordPress Codex では、この the_excerpt で表示する文字数を変更するスニペットが紹介されています。

functions.php
function new_excerpt_length($length) {
return 20; /* 文字数 */
}
add_filter('excerpt_length', 'new_excerpt_length');

でも、WordPress を日本語で使う場合、必ず WP Multibyte Patch というプラグインを入れてますよね?抜粋表示はこのプラグインで 110 文字と設定されていて、上記のコードでは上手くいきませんでした …。

なので以下のようにすれば、好きな文字数で抜粋を表示できますね!mb_substr 関数で、切り取っちゃえばいいんですね。

ex – index.php
<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>

なるほどー … これなら自由に好きな文字数を選べますね!上記をヒントに関数にしてみました。

functions.php
/* 抜粋の代替え */
function my_excerpt( $length ) {
     global $post;
     $content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
     $content = $content . "...";
     return $content;
}

表示したいところには、以下のように文字数を指定して書きます。下記の場合には40文字です!

ex- index.php
<?php echo my_excerpt(40); ?>

4. タイトルの文字数を制限して表示する

ブログの記事のタイトル、私はどちらかというと長すぎです X( 記事ページ(single.php)では、タイトルを全文表示するのはもちろんですが、トップページなどで一覧表示するときには、ページタイトルが長すぎるとレイアウト崩れをおこしちゃって困る ….。という場合もあります。

もちろん CSS でもある程度対応できると思いますが、文字数が多すぎた場合、省略できると便利かも。

タイトルの文字数

functions.php
function titlelimitchar($title){
  if(mb_strlen($title) > 20 && !(is_single()) && !(is_page())){
    $title = mb_substr($title,0,20) . "...";
  }
  return $title;
}
add_filter( 'the_title', 'titlelimitchar' );

上記の例では、mb_substr($title,0,20)20 文字に制限しています。でも、全角文字と半角文字が一緒に入ってる場合、文字数は同じでも長さ(幅)には変動があるので、注意が必要ですね!

5. 特定の文字をリンクとかにする

ブログを書いていて、よく貼付けるリンク(例えば自分のツイッターのアカウントへのリンクとか)は、毎回タグを書くのも面倒です。なので特定の文字列を入れると、自動でリンク付きに変換できちゃうと便利ですよね!横着者の私は、functions.php に以下のような感じで書いています。

functions.php
/* 文字列置き換え */
function replace_text_wps($text){
  $replace = array(
    '@twitter' => '<a href="http://twitter.com/WebDesignRecipe" target="_blank" class="twitter-link">@WebDesignRecipe</a>',
    '@facebook' => '<a href="http://www.facebook.com/nori.takahashi" target="_blank" class="facebook-link">facebook プロフィール</a>',
    '@g-plus' => '<a href="https://plus.google.com/116578177130489958038/about" target="_blank" class="g-plus-link">Google+ プロフィール</a>',
  );
  $text = str_replace(array_keys($replace), $replace, $text);
  return $text;
}
add_filter('the_content', 'replace_text_wps');

上の例では、記事中に @twitter と書くと、ブラウザで出力するときには という様に、リンク付きで@WebDesignRecipe に書き換えてくれます。

単純に文字列を置き換えてるだけなので、別にリンクじゃなくてもアイデア次第でいろいろ使えますね!

また、コードを省略して効率化したいなーという時は、WordPressのデフォルト機能、ショートコードも便利です!ショートコードについては、過去記事:22のWordPressカスタマイズハックで紹介しています!

6. サイドバーのカテゴリーリストにアイコンを付けたい

サイドバーなどで表示するカテゴリーのリスト。一般的にサイドバーなどでカテゴリーを表示する時は、テンプレートタグ – wp_list_categories をよく使います。

でも、カテゴリーごとにアイコンを付けたいなーという時、みなさんどうしてますか?wp_list_categories で出力されるタグには、以下のようなクラスしかつきません …

出力される HTML
<li class="cat-item cat-item-1"><a href="#">Photo</a></li>
<li class="cat-item cat-item-2"><a href="#">Design</a></li>

cat-item-1 や、cat-item-2 を使えば、CSS で個別に背景画像を指定することができるんですけど、これだとちょっとめんどくさい …。というのは、ローカル環境で作ったテーマを、サーバーにあげたりしてカテゴリー作ると、ローカルで作ったときと、cat-item-X の数字(カテゴリーID)が必ず一致するとは限りません。なので cat-item-1 というクラスが、別のカテゴリーになってしまうことだってあります。

できればスラッグ付きのクラス(cat-photo とか、cat-design とか)が出ると、本当に助かるんですけど。

なのでカテゴリーごとにアイコンを付けたい場合は、wp_list_categories を使わないで、get_categories を使ってます。

sidebar.php
<ul>
<?php
$args=array(
  'orderby' => 'name',
  'order' => 'ASC'
  );
$categories=get_categories($args);
foreach($categories as $category) { 
  echo '<li class="cat-'. $category-> slug .'">';
  echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a>';
  echo '</li>';
} 
?>
</ul>

こうすれば、cat-photo とか、cat-design とかのクラスがつくようになりました!でも、必ずカテゴリーのスラッグを英数字にしておかなければなりません。この辺が wp_list_categories でスラッグ名のクラスを付けない理由なのかなー …。

出力される HTML
<li class="cat-photo"><a href="#">Photo</a></li>
<li class="cat-design"><a href="#">Design</a></li>

テンプレートタグ wp_list_categories に、スラッグ名のクラス付ける方法あったら、教えていただけると嬉しいです!

ATTENTION

Simple Colors さんが、wp_list_categories にスラッグ名のクラスを付けるコードを書いてくださいました!とっても助かりました!ありがとうございます!詳しいコードは Simple Colors さんの以下の記事を参考にしてくださいね!

7. ファビコンを表示する

header.php に直接書いてもいいんですけど、functions.php に書いて、wp_head にフックしてます。フックって何?っていう人は、過去記事:WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフックを読んでみてくださいね!

functions.php
function blog_favicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/images/favicon.ico" />'."\n";
}
add_action('wp_head', 'blog_favicon');

8. カスタムフィールドをループ外で使いたい

WordPress の便利な機能のひとつ、カスタムフィールド。基本的に、カスタムフィールドで入力した値は、ループの中で取得します。ループっていうのは以下みたいなの。

ループの一例

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>

/*ここがループの中*/

<?php endwhile; ?>
<?php endif; ?>

index.php や single.php などの中で、ループを見つけることができると思います。

でも場合によってはループの外で、カスタムフィールドの値を使いたいなーということもあります …。そんな時は、使いたい場所に以下のコードを書きます。

ex- header.php
<?php
global $wp_query;
$postid = $wp_query -> post -> ID;
echo get_post_meta($postid, 'custom-field-name', true);
wp_reset_query();
?>

9. 検索結果から指定したページを削除

検索結果に、特定のページを表示させたくない場合もありますよね。そんな時は、functions.php に以下のコードを追加すればOKです。

functions.php
function fb_search_filter($query) {
  if ( !$query -> is_admin && $query -> is_search) {
    $query -> set('post__not_in', array(28, 35) );
  }
  return $query;
}
add_filter( 'pre_get_posts', 'fb_search_filter' );

'post__not_in', array( 28, 35 ) では、表示したくないページの ID を指定します。もちろんもっとたくさん指定することもできます!

10. RSS feed の抜粋配信に画像を追加

WordPress の RSS/Atom feed の配信は、全文配信するか、抜粋配信するかを選べますよね。このブログ – Webデザインレシピでは、抜粋配信しています。

でも抜粋配信のときは、文章の抜粋だけで画像が表示されなくてちょっと淋しい感じもします … そこで functions.php に以下を追加します。

functions.php
function rss_post_thumbnail($content) {
  global $post;
  if(has_post_thumbnail($post -> ID)) {
    $content = '<p>' . get_the_post_thumbnail($post -> ID) .
    '</p>' . get_the_excerpt();
  }
  return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');

こうすると、もし記事にアイキャッチ画像を設定してあれば、その画像がフィードに配信されます!

RSS での表示

RSS で画像

11 管理画面にもファビコンをつけたい

さっきはブログ自体のファビコンを設定しましたが、管理画面にもファビコンを設定したいです。また、同じファビコンじゃなくて違うファビコンの方が、ぱっと見て分かりやすいかもですね!

管理画面のファビコン

functions.php
function admin_favicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/images/admin-favicon.icon" />';
}
add_action('admin_head', 'admin_favicon');

12. HTML エディタのフォントを変えたい

WordPress の HTML エディタのフォント、WordPress 3.2 になって変わりましたよね?ちょっと私的には見にくいなーって思ったので、フォント変えました。やりかたは簡単、functions.php に以下を追加します。font-family やフォントカラーはお好みのフォントに変更してくださいね!

functions.php
function change_editor_font(){
echo "<style type='text/css'>
#editorcontainer textarea#content {
  font-family: \"ヒラギノ角ゴ Pro W3\",
	\"Hiragino Kaku Gothic Pro\",
    Osaka,
    \"MS Pゴシック\",
    sans-serif;
	font-size:14px;
	color:#333;
}
</style>";
}
add_action("admin_print_styles", "change_editor_font");

ATTENTION

WordPress 3.3 になって、IDが変更になったみたいです。下記の様に指定すればOKです!

  • 3. #wp-content-wrap textarea#content.wp-editor-area { ... }

13. 記事によって独自のCSSを使いたい

記事やページによっては、独自の スタイルを指定したい場合もありますねー。そんなときの tips を 2つほど。サーバーにあげた外部 CSS を読み込む方法と、<head> 内に style タグを出力する方法です。

13.1. 外部 CSS ファイルを読み込みたい場合

まずは自分でスタイルシートを作って、サーバーにあげる方法です。独自のスタイルシートを書いたら、記事の ID を CSS ファイルの名前に含めてサーバーにアップします。例えば style-100.css(style-ID.css) という感じです。次に、functions.php に以下を追加します。

functions.php
function article_id_style() {
  global $post;
  if (is_single()) {
    $currentID = $post->ID;
    $serverfilepath = TEMPLATEPATH.'/css/style-'.$currentID.'.css';     $publicfilepath = get_bloginfo('template_url');
    $publicfilepath .= '/css/style-'.$currentID.'.css';
    if (file_exists($serverfilepath)) {
      echo "<link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen' />\n";
    }
  }
}
add_action('wp_head', 'article_id_style');

もしテーマの css フォルダの中に、該当する CSS ファイルがあれば、自動的に外部リンクを貼って、CSS ファイルを読み込みます。

このスニペットを知る前は、その度に header.php に条件分岐書いてたんですけど …。記事 ID 使っちゃえばいいんですよねー!なるほどです!

13.2. 管理画面からサクッと更新

結構長めの CSS なら上記の方法がいいかなーと思いますけど、ちょっとしたスタイルを指定するくらいだと、わざわざサーバーに CSS ファイルをあげるのも面倒です …。以前はカスタムフィールドを使ってましたが、下記ウィジットが気にいってます!functions.php に以下のコードを追加するだけです。

functions.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();
  }
}

CSS 専用のフィールド

CSS専用フィールド

カスタム CSS 専用のフィールド。

カスタム CSS 専用のボックスが出現!ここに CSS を書くと、<head> 内に style タグで出力されます。

14. クライアントさん向け?のカスタマイズ

自分のブログなら必要ないかもしれませんが、クライアントさんに納品する WordPress なら、ちょっとやっておきたいかも … というカスタマイズいろいろです。

14.1. 管理画面のロゴ

管理画面の WordPressのロゴ、クライアントさんに納品するなら変更した方がいいかも。functions.php に以下を追記して、スタイルシートを上書きしちゃいましょう。

管理画面のロゴ

functions.php
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }
</style>';
}
add_action('admin_head', 'my_custom_logo');

WordPress 3.2 になってから、ロゴが小さくなりましたね。大きさは 16px x 16px です。テーマの images フォルダに custom-logo.gif をアップしておきます。

ATTENTION

WordPress 3.3 になってから、id やサイズが変更になっています。CSS で指定する id は、下記を参考にしてください。サイズは 20px × 20px で、CSS スプライトが使用されています。

  • #wp-admin-bar-wp-logo .ab-icon { /* Style */ }

14.2. フッターの文字

ロゴと合わせてフッターの文字も変更します。functions.php に以下を追記します!

functions.php
function remove_footer_admin () {
  echo 'お問い合わせは<a href="http://webdesignrecipes.com/contact/" target="_blank">Webデザインレシピ</a>まで';
}
add_filter('admin_footer_text', 'remove_footer_admin');

フッターのテキスト

表示するテキスト(echo 以下)は、変更してくださいねー!

14.3. アドミンバーを消す

アドミンバー

WordPress 3.1 から登場したアドミンバー。これも必要ないなら消しちゃいます。管理ページの ユーザー → ユーザーの編集 → 管理バーの表示 で消すこともできるんですけど、クライアントさんごと、毎回やるのも大変だし、ユーザーが多いときにはもっと大変です。functions.php に以下を追記すれば簡単に消せてらくちんです。

functions.php
function disable_admin_bar(){
  return false;
}
add_filter( 'show_admin_bar' , 'disable_admin_bar');

return false … もっと簡単に書くことができるみたいですねー …。下記みたいに 1行で済むようです。

functions.php
add_filter('show_admin_bar','__return_false');

この書き方は覚えておこう …。

でもこのままだと、さっきの ユーザー → ユーザーの編集 → 管理バーの表示 の部分は表示されたままです。この部分も非表示にする方法が understandard さんで紹介されています!

14.4. ログイン画面のロゴ

WordPress のログイン画面にも、大きく WordPress のロゴがあります。これもクライアントさんのロゴに変えてあげるといいかも。ロゴ画像を用意したら、functions.php に以下を追加します。

functions.php
function my_custom_login_logo() {    
  echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }     </style>';
}
 add_action('login_head', 'my_custom_login_logo');

画像のサイズ(h1a タグのサイズ)は 326px x 82px です(WordPress 3.2)!

14.5. ログイン画面全体のスタイルを変更する

ログイン画面

ロゴだけじゃなくて、背景やリンクの色など全部カスタマイズしたい!っていう場合、以下のコードを functions.php に追加して、外部スタイルシートを読み込ませれば OK です。

login.css のパスは、環境に合わせて変更してくださいね!Webデザインレシピのログイン画面も変更してみました。けっこう気分が盛り上がっていい感じです!

functions.php
function custom_login() { 
  echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/login.css" />';
}
add_action('login_head', 'custom_login');

14.6. プロフィールから要らない項目を削除

管理画面 → ユーザー → プロフィール をみると、色んな項目がありますよねー。AIM とか、Yahoo IMJabber / Google Talk とか … 。これは必要ないかもですねー。コレなんですか?ってクライアントさんに聞かれても分からないし …。なので下のコードを functions.php に追加して、消してしまいます。

プロフィールの必要ない項目

functions.php
function hide_profile_fields( $contactmethods ) {
  unset($contactmethods['aim']);
  unset($contactmethods['jabber']);
  unset($contactmethods['yim']);
  return $contactmethods;
}
add_filter('user_contactmethods','hide_profile_fields');

14.7. 逆にプロフィールに項目を追加

今度は逆に項目を追加します。試しにツイッターFacebookGoogle+ のアカウントを入れてみます。

functions.php
function my_new_contactmethods( $contactmethods ) {
/* ツイッター */
$contactmethods['twitter'] = 'Twitter';
/* facebook */
$contactmethods['facebook'] = 'Facebook';
/* Google+ */
$contactmethods['g_plus'] = 'Google+';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

ここで注意するのは、$contactmethods['g_plus'] などの、g_plus の部分。この名前はデータペースのカラム名になるので、使えない文字があります。普通に英数字だけで書いてれば問題ないです。

以下のように項目が追加されました!

プロフィールに項目を追加

14.8. プロフィールを表示してみよう

今度はプロフィールを表示してみます。数人で書いてるブログなどでは、記事の下の方に著者がアバター付きで表示されてたりしますよね!あの部分を作ってみます。

About Author – 高橋 のり

高橋 のり

静岡県在住、Webデザイナーとして働いている「高橋のり」です。フリーランスで仕事をしています!他にもこんな記事を書いています!

single.php
<h2>About Author</h2>
<a href="<?php the_author_meta('user_url');  /* Webサイト */ ?>">
<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>
</a>
<h3>Written by <?php the_author_link(); /* ニックネーム */ ?></h3> 
<p>
<?php the_author_meta('description'); /* 自己紹介 */ ?>
他にも<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); /* 記事一覧へのリンク */ ?>">こんな記事</a>を書いています! 
</p>
<ul>
<li><a href="http://twitter.com/<?php the_author_meta('twitter');  /* Twitter */ ?>" target="_blank">Twitter</a></li>
<li><a href="http://www.facebook.com/<?php the_author_meta('facebook');  /* Facebook */ ?>" target="_blank">Facebook</a></li>
<li><a href="https://plus.google.com/<?php the_author_meta('g_plus'); /* Google+ */ ?>/about" target="_blank">Google+</a></li>
</ul>

プロフィール欄の情報は the_author_meta で取り出せます!でも、ループ内で使うことが条件です。上記の例では get_avatar などのテンプレートタグも使っています。

get_avatar( get_the_author_meta('user_email'), '80', '' )
Gravatarからアバターを表示します。80 は 80px四方という意味です。
the_author_meta('user_url')
プロフィール欄のウェブサイトに入力した値です。
the_author_meta('description')
プロフィール欄のプロフィール情報(自己紹介など)
the_author_meta('twitter')
さっき作った Twitter の値です … facebook、g_plusも同じです!
the_author_link()
ブログでの表示名です。プロフィール欄のウェブサイトってところに URL が入っていると、自動でリンクにしてくれます。
get_author_posts_url( get_the_author_meta( 'ID' ) )
このリンクをクリックすると、同一ユーザーが書いた記事一覧(author.php、index.phpなど)に移動します。

14.9. 管理者以外にアップデートのお知らせ非表示

WordPress のアップデートがあると、管理ページの一番上にお知らせが表示されますよね!とっても便利です。でもクライアントさんに納品した WordPress だと、ちょっと表示されてほしくないかも … 管理者に連絡してください!って出るんですよねー。

更新のお知らせ

更新のお知らせ

管理者以外の人には、「管理者に連絡してください!」って出るんですよね …。

クライアントさんによっては、私が管理者のままで、クライアントさんは編集者っていう場合もあります。なので管理者にはお知らせを表示するけど、編集者以下の権限では表示させないっていうふうにしてます。

functions.php
if (!current_user_can('edit_users')) {
  function wphidenag() {
    remove_action( 'admin_notices', 'update_nag');
  }
  add_action('admin_menu','wphidenag');
}

if (current_user_can('edit_users')) は、ユーザー編集(edit_user)の権限を持っている場合(= 管理者)という意味です。上記のコードの場合は、頭に ! がついているので、ユーザー編集の権限をもっていない場合という意味になりますね!

14.10. 管理者以外には必要ないサイドバーのメニューを非表示

さっきのはアップデートのお知らせでしたけど、今度は管理ページにある メニューメディアツールコンタクトフォーム7(お問い合わせフォームのプラグイン)を入れると出る お問い合わせ など、使わないのに「これなんですか?」って聞かれる感じのとか、いじって欲しくないところとかありますよね。

管理者以外には、表示したくないものもあるかも

functions.php
if (!current_user_can('edit_users')) {
  function remove_menus () {
    global $menu;
    $restricted = array(
      __('メディア'),
      __('ツール'),
      __('お問い合わせ')
    );
    end ($menu);
    while (prev($menu)){
      $value = explode(' ',$menu[key($menu)][0]);
      if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){
        unset($menu[key($menu)]);
      }
    }
  }
  add_action('admin_menu', 'remove_menus');
}

上記の例では、メディア、ツール、お問い合わせを非表示にしています。

14.11. ユーザーIDを指定してメニューを非表示

今度は権限じゃなくて、ユーザーIDを指定して非表示にしてみます。管理者が複数いる場合など、固定ページの部分は、他の管理者に触って欲しくないなーって時に使えますね!

functions.php
function remove_menus () {
  global $menu;
  global $current_user;
  get_currentuserinfo();
  if($current_user -> user_login == 'Nori') {
    $restricted = array(
      __('メディア'),
      __('リンク')
    );
    end ($menu);
    while (prev($menu)){
      $value = explode(' ',$menu[key($menu)][0]);
      if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){
        unset($menu[key($menu)]);
      }
    }
  }
}
add_action('admin_menu', 'remove_menus');

if($current_user->user_login == 'Nori')'Nori' の部分がユーザーIDです。こうすると、ユーザーID Nori さんには、メディアとリンクのメニューが表示されません。

14.12. 投稿画面の要らないボックスを消す

WordPress の投稿画面、本当に色んなボックスがあります。

たくさんのメタボックス

これらも使わないものは、非表示にしてあげたほうがクライアントさんも混乱しなくていいかも。簡単、シンプルに使ってもらいたいですもんね!functions.php で消したいボックスを指定します。

functions.php
if (!current_user_can('edit_users')) {
  function remove_extra_meta_boxes() {
    remove_meta_box( 'postcustom' , 'post' , 'normal' ); /* 投稿のカスタムフィールド */
    remove_meta_box( 'postcustom' , 'page' , 'normal' ); /* 固定ページのカスタムフィールド */
    remove_meta_box( 'postexcerpt' , 'post' , 'normal' ); /* 投稿の抜粋 */
    remove_meta_box( 'postexcerpt' , 'page' , 'normal' ); /* 固定ページの抜粋 */
    remove_meta_box( 'commentsdiv' , 'post' , 'normal' ); /* 投稿のコメント */
    remove_meta_box( 'commentsdiv' , 'page' , 'normal' ); /* 固定ページのコメント */
    remove_meta_box( 'tagsdiv-post_tag' , 'post' , 'side' ); /* 投稿のタグ */
    remove_meta_box( 'tagsdiv-post_tag' , 'page' , 'side' ); /* 固定ページのタグ */
    remove_meta_box( 'trackbacksdiv' , 'post' , 'normal' ); /* 投稿のトラックバック */
    remove_meta_box( 'trackbacksdiv' , 'page' , 'normal' ); /* 固定ページのトラックバック */
    remove_meta_box( 'commentstatusdiv' , 'post' , 'normal' ); /* 投稿のディスカッション */
    remove_meta_box( 'commentstatusdiv' , 'page' , 'normal' ); /* ページのディスカッション */
    remove_meta_box( 'slugdiv','post','normal'); /* 投稿のスラッグ */
    remove_meta_box( 'slugdiv','page','normal'); /* 固定ページのスラッグ */
    remove_meta_box( 'authordiv','post','normal' ); /* 投稿の作成者 */
    remove_meta_box( 'authordiv','page','normal' ); /* 固定ページの作成者 */
    remove_meta_box( 'revisionsdiv','post','normal' ); /* 投稿のリビジョン */
    remove_meta_box( 'revisionsdiv','page','normal' ); /* 固定ページのリビジョン */
    remove_meta_box( 'pageparentdiv','page','side'); /* 固定ページのページ属性 */
  }
  add_action( 'admin_menu' , 'remove_extra_meta_boxes' );
}

脈絡なく色んなコード並べてしまいましたけど、いつも割とよく使ってるカスタマイズコードのまとめでした。ソース元の Webサイトやブログに感謝です ;D

Comments

Thank you for the comment.