クライアントに納品するWordPressの管理画面カスタマイズ vol.6

管理画面のカスタマイズするところ、探せばたくさんありますね。

前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.5 にて、クライアントへダッシュボードを使って、クライアントへのお知らせ表示をしました。

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

今回は投稿画面のカスタマイズとなります。

デフォルト投稿編集画面
デフォルト投稿編集画面

この画面を、クライアント向けにカスタマイズする方法です。

 

まず最初。いらないものはレッツ削除。

すぐに思いつくものは「ヘルプタブ」という名称となるのかは分かりませんが、それ。

ヘルプタブ
ヘルプタブ

まずはこのヘルプタブを削除したいと思います。

今回は簡単にヘルプタブと表示オプションタブを削除することができるプラグイン「Screen Options and Help Show Customize」をインストールして有効化して、そこから削除の設定をしました。

※使い方はWordPress プラグイン Screen Options and Help Show Customizeをご覧下さい。一応使い方を見なくても簡単に設定できるようには作っています。

 

できましたか?ついでに表示オプションも必要ないなら一緒に削除してもいいと思います。

ヘルプタブ削除後
ヘルプタブ削除後

あ、必要の無いメタボックス(タグとかスラッグとかリビジョンとか)は、表示オプションタブを削除する前に非表示にして、表示オプションタブを削除すると良いと思います。

 

投稿画面カスタマイズの本題、ビジュアルエディタ

ちなみに、デフォルトのテーマ(TwentyTwelve)でのビジュアルエディタはこうですね。

ビジュアルエディタ-デフォルト
ビジュアルエディタ-デフォルト

 

H2タグやH3タグやul liタグなど、このような表示です。

ちなみに、フロントのサイト(一般のユーザーが見るサイト)のデザインを変更(style.css)しても、このビジュアルエディタの部分は変更されません。

ビジュアルエディタのCSSは別で用意されている為です。

で、このビジュアルエディタのH2などの部分にも、デザインが適用されるようにカスタマイズしていきます。

 

先に

フロントサイトのコンテンツ部分のCSSを以下のように設定しました。

.entry-content {
 background: rgba(0, 0, 0, 0.06);
 padding: 20px;
}
.entry-content h2 {
 font-size: 30px;
 line-height: 38px;
 background: rgba(195, 87, 0, 0.4);
 padding: 8px 22px;
}
.entry-content h3 {
 font-size: 22px;
 line-height: 28px;
 background: rgba(25, 100, 128, 0.4);
 padding: 8px 22px;
}
.entry-content h4 {
 font-size: 18px;
 line-height: 26px;
 padding: 8px 22px;
 color: green;
}
.entry-content ul {
 margin: 0;
 paddign: 0;
}
.entry-content ul li {
 color: red;
}

 

で、このCSSと同じものを、ビジュアルエディタにもこれから適用していきます。

デフォルトのテーマのままだと、黒字しかないので上手く適用されているのか分からなかったので、上記はCSSが適用されているどうか分かりやすいようh2やh3の背景色を適当に変更しています。

デザイン変更後のフロント
デザイン変更後のフロント

 

フロントのコンテンツ部分はこれでCSSが適用されている事が分かりました。

次に、本題のビジュアルエディタのCSS設定です。

 

デフォルトテーマ(TwentyTwelve)のfunctions.phpをくまなく探せば分かりますが、適用するためにはまず、

add_editor_style();

という関数を、functions.phpに記載します。

※フックを用いて実行させてください。具体的には例えば↓

function mytheme_setup() {
  add_editor_style();
}
add_action( 'after_setup_theme', 'mytheme_setup' );

 

実行すると、テーマディレクトリ内のeditor-style.cssというCSSファイルをビジュアルエディタに読み込む設定をしてくれます。

あとは単純に、テーマディレクトリ内にeditor-style.cssというファイルが無ければご自身で作成して、上記のCSSを適用すればOKです。

※注意 : ビジュアルエディタ内に entry-content というクラスはありません。

なので、.entry-content となっている部分を、ビジュアルエディタ内の mceContentBody クラスなどに変更してください。

 

たまに記述したCSSが適用されない場合があります。
この場合は、ファイル名が微妙に間違っているか、キャッシュが原因だったりします。

ブラウザのF5や更新ボタンを押しても、なかなか更新されない場合もあります。

その場合は、キャッシュを削除するか、スタイルシートを直接ブラウザから一度開いてください。

chromeでのスタイルシート読み込み一覧
chromeでのスタイルシート読み込み一覧

キャッシュが残っていると、ファイルを開くと真っ白だったり古いCSSの記述だったりします。この場合はキャッシュが原因なので、ここで更新をし、CSSファイルの内容が変われば、ビジュアルエディタにも記述したCSSが適用されます。

ビジュアルエディタへのCSS適用後
ビジュアルエディタへのCSS適用後

これでビジュアルエディタにもフロントサイトと同じようにCSSの適用ができました。

これで完了!

と思います。

 

が、よーく考えて下さい。フロントサイトのCSSを触る時って、これからも発生しますよね。

だとすると、同じようにeditor-style.cssも触らないと同じデザインが適用されません。

同じスタイルを適用するだけなのに、もう一度同じような事をする…。ちょっと手間ですね。 😕

 

ビジュアルエディタとコンテンツ部分のCSS適用が1箇所で済めばいいのに。

と思った方は、以下の続きの記事は参考になると思います。

ということで次は、ビジュアルエディタのCSSとフロントサイトのCSSをひとつにまとめる(コンテンツ部分のスタイルを一つにまとめる)方法です。

 

ビジュアルエディタとフロントサイト共通のCSS

どちらにも読み込む為のCSSファイルを先に作成します。

今回は front-content.css というファイルを、コンテンツ部分共通のCSSとして使うことを想定して進めます。

先ほど、ビジュアルエディタにCSSを適用する方法として、 add_editor_style() を使用しましたが、もうひとつこの front-content.cssを読み込ませます。

function mytheme_setup() {
  add_editor_style();
  add_editor_style( "front-content.css" );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

※@importでCSSファイルを読めばいいじゃないか。と思われる方もいるかと思いますが、importだとブラウザのパフォーマンスに影響が出るという事例もあったりするので、今回は追加で読み込ませる方法をとっています。
ご自身のお好みの方法で読み込ませて下さい。

これで、ビジュアルエディタに「editor-style.css」「front-content.css」の2つのCSSが読み込まれるようになりました。

もともとのeditor-style.cssはビジュアルエディタのCSSをリセットする目的等で使用されるといいと思います。

先ほどの、ビジュアルエディタに適用させていたCSSを、front-content.cssに記述します。

が、両方のコンテンツ部分に適用させるために、合体? 😎 させます。

front-content.css

.entry-content, .mceContentBody {
 background: rgba(0, 0, 0, 0.06);
 padding: 20px;
}
.entry-content h2, .mceContentBody h2 {
 font-size: 30px;
 line-height: 38px;
 background: rgba(195, 87, 0, 0.4);
 padding: 8px 22px;
}
.entry-content h3, .mceContentBody h3 {
 font-size: 22px;
 line-height: 28px;
 background: rgba(25, 100, 128, 0.4);
 padding: 8px 22px;
}
.entry-content h4, .mceContentBody h4 {
 font-size: 18px;
 line-height: 26px;
 padding: 8px 22px;
 color: green;
}
.entry-content ul, .mceContentBody ul {
 margin: 0;
 paddign: 0;
}
.entry-content ul li, .mceContentBody ul li {
 color: red;
}

ビジュアルエディタで問題なくCSSが読み込まれましたか?

問題が無ければ、あとはフロントサイトにも追加でfront-content.cssを読み込ませてください。

header.phpに書くなり、wp_headerにフックさせるなりで適用させれば、コンテンツ部分のCSSの管理が1箇所で管理できるようになります。

私はたまにやってしまいますが、

フロントサイトのCSSは設定したが、ビジュアルエディタには適用してなかった。。 😥

なんて事には、多少はなりづらくなると思うのでおすすめです。

 

管理画面サイドメニューにカテゴリ内記事一覧のメニューを

カテゴリを作成して、記事にカテゴリ属性を付けることはよくありますね。

で、その作成したカテゴリ内の記事一覧を、管理画面から見る方法としては、

「投稿一覧」 から 指定のカテゴリを選択して絞込み検索をする事でできます。

投稿一覧カテゴリ選択部分
投稿一覧カテゴリ選択部分

訳あって、そういう機能を使いたくない。いちいち絞込み検索するまでの流れが面倒。

という方もいると思います。最初からサイドメニューに作成したカテゴリの記事一覧メニューが表示されて、クリックするだけでその記事一覧が表示されるように。

今回は、それをやりたいと思います。

 

ゴールとするメニューの例

「投稿」メニューと、「メディア」の間にカテゴリ一覧が表示されるようにしていきます。

ゴール
ゴールとするメニュー例

 

まずはカテゴリ一覧を取得。

の前に。まずはフックさせます。

管理画面のメニューに追加する事は決まっているので、ご自身のテーマのfunctions.phpにて、admin_menuにアクションを追加します。

add_action( 'admin_menu' , 'my_admin_menu' );

今回は適当に、my_admin_menuという関数を用意する前提です。で、関数を用意。

function my_admin_menu() {

}

この関数内でカテゴリ一覧を取得したりメニューを追加したりしていきます。

 

じゃあまずは、カテゴリ一覧を取得

$args = array( 'hide_empty' => 0 );
$categories = get_categories( $args );
print_r($categories);

で、カテゴリ一覧が出力されます。表示が変にはなりますが、今はカテゴリを取得する事が目的なので、それは無視してください。

get_categories 出力結果
get_categories 出力結果

このカテゴリが表示されている順番の通りに、メニューが作成されることになりますので、順番を変更したい方は今のうちに順番を変更してください。

get_categories()については関数リファレンス/get categoriesを見てパラメータを設定すれば順番を変更できます。

ここまでで、カテゴリ一覧が取得できたらprint_rは消して下さいね。

 

管理画面サイドメニューへの追加

メニューへの追加方法は、add_menu_pageで追加する方法とglobal $menuを使って追加する方法の2種類は知っています。

どの方法でやろうかと考えましたが、今回は「カテゴリ一覧メニューの上下に、セパレーター(区切り線)も設置」するので、グローバル変数の$menuを使って追加していきます。

まずはこれを。

global $menu;
global $submenu;

print_r($menu);

どうですか?とりあえず上手く出力できましたか?

$menu 出力
$menu 出力

次に、この出力を「HTMLソース」から確認してください。

htmlソース
htmlソース

今回は「投稿一覧」と「メディア」の間に追加する予定です。配列のキーを見ると、投稿は5、メディアは10となっているのが分かると思います。このキーの小さい順に、wordpressの管理画面のサイドメニューは表示されているので、今回は7ぐらいのところにカテゴリ一覧のメニューを表示させたいと思います。

$slug = 'edit.php?cat=' . $categories[0]->cat_ID;
$menu[7] = array( $categories[0]->cat_name , 'edit_posts', $slug , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );

カテゴリ一覧で取得した最初のカテゴリを親メニューとしました。

親メニュー設定
親メニュー設定

確かに、記事一覧は指定のカテゴリの記事のみが表示されました。しかし、このままではメニューが「投稿」「投稿一覧」のままです。現在のページが、

edit.php?cat=*

ではなく、

edit.php

として認識されているようです。

なので、この部分を変更する為に、グローバル変数 $parent_file を変更します。

変更する為には現在のフックポイントとは別にフックしなければいけないので注意。

function edit_parent_file() {
 global $parent_file;
 global $current_screen;

 if( $current_screen->base == 'edit' && isset( $_REQUEST["cat"] ) ) {
 $args = array( 'hide_empty' => 0 );
 $categories = get_categories( $args );
 $parent_file = 'edit.php?cat=' . $categories[0]->cat_ID;
 }
}
add_action( 'admin_head', 'edit_parent_file');

これで、現在のメニューの設定が効くようになります。

現在のメニュー
現在のメニュー

この調子で、サブメニューも作成していきます。

先ほどのmy_admin_menu関数内にサブメニュー用に以下を追加。

foreach( $categories as $key => $cat ) {
 $slug_s = 'edit.php?cat=' . $cat->cat_ID;
 $position = $key + 1;
 $submenu[$slug][$position] = array( $cat->cat_name , 'edit_posts', $slug_s , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );
 }

これで、サブメニューができました。

サブカテゴリー
サブカテゴリー

が、またしてもサブメニューを選択しても、サブメニューが選択状態にならない。。

どうやら、グローバル変数 $submenu_file も少し変更しないといけないようですね。

先ほどのedit_parent_fileを少し変更して、

function edit_parent_file() {
 global $parent_file;
 global $submenu_file;
 global $current_screen;

 if( $current_screen->base == 'edit' && isset( $_REQUEST["cat"] ) ) {
 $args = array( 'hide_empty' => 0 );
 $categories = get_categories( $args );
 $parent_file = 'edit.php?cat=' . $categories[0]->cat_ID;
 $submenu_file = 'edit.php?cat=' . intval( $_REQUEST["cat"] );
 }
}
add_action( 'admin_head', 'edit_parent_file');

$submenu_file にあたる部分を追加しました。

これで、完成ですね。

サイドメニュー
サイドメニュー

 

すっかり忘れていました。区切り線を作成したメニューの上下に入れるのを。

$separator = array( '' , 'read' , 'separator' , '' , 'wp-menu-separator' );
$menu[6] = $separator;
$menu[8] = $separator;
ksort($menu);

※ちなみに、ksortを実行しないと、なぜか上下に区切り線が出ませんでした。

 

 

何度かコードを追加したりして分からなくなってきた方もいるかもしれませんので、コードを下記に記載します。

 

functions.php

function my_admin_menu() {

 $args = array( 'hide_empty' => 0 );
 $categories = get_categories( $args );

 global $menu;
 global $submenu;

 $slug = 'edit.php?cat=' . $categories[0]->cat_ID;
 $menu[7] = array( $categories[0]->cat_name , 'edit_posts', $slug , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );

 foreach( $categories as $key => $cat ) {
  $slug_s = 'edit.php?cat=' . $cat->cat_ID;
  $position = $key + 1;
  $submenu[$slug][$position] = array( $cat->cat_name , 'edit_posts', $slug_s , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );
 }
 $separator = array( '' , 'read' , 'separator' , '' , 'wp-menu-separator' );
 $menu[6] = $separator;
 $menu[8] = $separator;
 ksort($menu);
}
add_action( 'admin_menu' , 'my_admin_menu' );

function edit_parent_file() {
 global $parent_file;
 global $submenu_file;
 global $current_screen;

 if( $current_screen->base == 'edit' && isset( $_REQUEST["cat"] ) ) {
  $args = array( 'hide_empty' => 0 );
  $categories = get_categories( $args );
  $parent_file = 'edit.php?cat=' . $categories[0]->cat_ID;
  $submenu_file = 'edit.php?cat=' . intval( $_REQUEST["cat"] );
 }
}
add_action( 'admin_head', 'edit_parent_file');

クライアントに納品するWordPressの管理画面カスタマイズ vol.4.5

ログイン画面のカスタマイズを、もっと深くカスタマイズする方法を紹介していこうと思い、記事を書こうと思いましたが、記事のタイトルをどうしようか迷いました。

というのも、クライアントに納品するwordpressの管理画面カスタマイズ vol.4にてログイン画面の簡単なカスタマイズ方法を紹介、クライアントに納品するwordpressの管理画面カスタマイズ vol.5にてクライアントへの状況案内の記事を作成済みで、この記事の番号は・・・4と5の間ぐらいだろ~な~ということで、タイトルは4.5としています。。

分かりづらっ!

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

この記事はちょっと長いです。なので、先にこのようなログイン画面が作れるますよーとここに表記しておきます。

ログイン画面サンプル
ログイン画面サンプル

 

まずはvol4のこのようなカスタマイズ方法は簡単ですね。

ログイン画面4
ログイン画面4

でも、クライアントへCMSとして提供するので、もっと自社のCMSらしいデザインにしたい。

もっとより深いカスタマイズをしたい。そういったカスタマイズ方法を記載しています。

 

まずはデフォルトのログイン画面を確認

ログイン画面
ログイン画面

いつものログイン画面です。この画面をカスタマイズしていきます。

 

Yahoo!っぽいやつを参考として

ログイン画面
参考にするヤフーのログイン画面

今回カスタマイズ後の画面をヤフーのログイン画面風と決めました。

ヤフーのログイン画面をおおまかに分けると、

  • ヘッダー(ロゴ、ヘルプへのリンク、パスワード変更の案内)
  • コンテンツ(ログインフォーム、広告的なリンク?)
  • フッター(いろんなリンク)

です。(おおざっぱ過ぎ?)

じゃあさっそくやっていきましょ。

 

全体枠

ログインフォームの全体枠css
ログインフォームの全体枠css

管理画面で全体の幅を指定しているのは#loginとなっていますので、#loginのスタイルをまずは変更。

※管理画面にCSSの読み込み方が分からない人はクライアントに納品するwordpressの管理画面カスタマイズ vol.4を読んでね。

Yahooは950pxなので、ここは同じように。

#login {
 width: 950px;
 margin: 0 auto;
 padding: 10px 0;
}

これで、全体の幅が大きくなりました。

全体幅変更後
全体幅変更後

やけに入力フォームが長いですが、今は気にせず。

次に、ロゴ画像の変更。

ログイン画面のロゴ部分
ログイン画面のロゴ部分

ここはヤフーと同じサイズの幅141px、高さ36px設定で。 (画像へのパスは設置したパスに変えてね。)

ここで注意ですが、ロゴ画像のサイズを変更する際、background-sizeの値をautoもしくはその画像のサイズにして下さい。でないと、作成したロゴ画像がbackground-sizeで指定したサイズに無理やり伸縮されます。

#login h1 a {
 width: 141px;
 height: 36px;
 background-image: url(./logo.png);
 background-size: auto;
 padding: 0;
}

せっかくなので、マウスオーバーも。

#login h1 a:hover {
 background-image: url(./logo_hover.png);
}
ロゴ画像変更
ロゴ画像変更

ちょっとロゴの上下の余白が狭く感じるので、余白もつけます。

#login h1 {
 padding: 18px 0;
}
ロゴ画像余白
ロゴ画像余白

うん、こんな感じでしょう。

 

次はログインフォーム。

ヤフーのログインフォームは右側に位置していて、上に10px、右に10pxの余白、幅は275px となっています。
ここも同じように変更していきます。

ログインフォームソース
ログインフォームソース

ソースを見ると、form の idはloginformとなっていて、いかにも#loginformとしてCSS設定をしていそうですが、ここのCSS設定は .login form にて設定されているので少し注意。

.login form {
 width: 275px;
 margin: 10px 10px 0 auto;
}

これで、このようになります。

ログインフォームサイズ変更後
ログインフォームサイズ変更後

ログインフォームが右に寄った事で、左側の広告にあたるような部分の空白がなんとも気になりますが、今はそのままで。

あ、「パスワードをお忘れですか?」の部分もここは右に移動させましょうか。

.login #nav, .login #backtoblog {
 width: 275px;
 margin: 10px 10px 0 auto;
}
ログイン画面その後
ログイン画面その後

余計空白が目立ちましたが、まだそのまま。フッターにリンクを表記していきましょう。

※ログイン画面フッターにリンクを表記する方法が分からない人はクライアントに納品するwordpressの管理画面カスタマイズ vol.4を読んでね。

ヤフーは色々ありますが、今回は「お問い合わせ」とコピーライトの表記をします。

ソースはこれ。

<div class="footer">
 <ul>
  <li>
   <a href="#">contact</a>
  </li>
 </ul>
 <p class="copyright">Copyright (C) 2013, SAMPLE. All Rights Reserved.</p>
</div>

こんな感じに設定。

ソース設定例
ソース設定例

cssはこんな感じに。

.login .footer {
 width: 950px;
 margin: 0 auto;
 text-align: center;
 border-top: 1px solid #777;
 padding: 10px 0 12px;
}

で、それらしくなってきました。

フッター設置後
フッター設置後

 

次は、ロゴの右側にもお問い合わせのリンクを設置(ヤフーでいう、ヘルプの代わり)

フッターに独自の表記を追加する場合は、WordPressにてアクションフックが既に用意されているので簡単ですが、ヘッダーのロゴの近くにソースを追加するとなると、どのフックなのか。

調べてみましたが、見当たらず….。 😳

しょうがないので、ここはJavascript(jQuery)で要素を追加していきます。

ここでロゴ周りのソースを確認。

<div id="login">
 <h1>
  <a href="wordpress.org">site name</a>
 </h1>
 ******* here **********
 <form name="loginform" ....

#login直下のh1の周辺に、お問い合わせのリンクのソースを追加します。
橙字で here と記載した部分です。

まずは、Javascriptファイルを読み込ませる為に、functions.phpに以下を記載。

function mylogin() {
 wp_enqueue_script( 'my-login-js' , get_template_directory_uri() . '/login.js' , array( 'jquery' ) );
}
add_action( 'login_head' , 'mylogin' );

これで、http://サイトURL/wp-content/themes/テンプレートディレクトリ/login.js

というJavascriptファイルがログイン画面に読み込まれます。

login.jsファイルを用意し、まずはちゃんとファイルが読み込まれているかどうかを確認する為に以下のコードを記載。

jQuery( function($) {
 alert('test');
});

これで「test」とアラートが出たら、正常に読み込まれています。
(アラートが出ない人は何かの記述が間違っているか、既にどこかでJavascriptのエラーが発生していると思われます。コンソールを確認してみてください)

javascriptの例
javascriptの例

まずは、お問い合わせリンクを、h1要素の後に追加します。

$(".login #login h1").after('<p><a href="#">***************</a></p><div class="clear"></div>');

これで、お問い合わせリンクが追加されました。

 

お問い合わせリンク追加
お問い合わせリンク追加

後は追加した要素にCSSを設定。

#login .head_link {
 float: right;
 width: 270px;
 padding: 24px 14px 0;
 text-align: right;
}

h1要素にfloat: leftを指定するのを忘れずに。

#login h1 {
 padding: 18px 0;
 float: left;
}

これで、このようになります。

リンク追加後
リンク追加後

こんな調子でどんどんいきましょう。

次に、ログイン画面左側の大きな余白の広告面っぽい部分。そのままではスタイルを適用するのが難しい為、ログインフォーム自体をdivで囲みます。

jsファイルに下記を追記してください。

$(".login #loginform").wrap('<div class="my-login-form" />');

すると、

ログインフォームを囲う
ログインフォームを囲う

.my-login-formというクラスのdivで、ログインフォームを囲う事ができます。あとはいつも通りCSSの設定です。

.my-login-form {
 width: 950px;
 height: 480px;
 background: url(./login_bg.png) no-repeat 0px 0px;
}

login_bg.pngは、幅950px、高さ480pxのただのオレンジ色の画像を用意。

これで、

背景指定後
背景指定後

このようになります。

よく見ると、あれ!?フォームが上にくっつき過ぎですね。
「パスワードをお忘れですか?」も下のほうにいきました。

なぜでしょう。ログインフォームにマージントップ10pxは指定されていますが。

まぁいいや、として。まずはログインフォームが上にくっつき過ぎている点を修整します。

.my-login-form {
 width: 950px;
 height: 480px;
 background: url(./login_bg.png) no-repeat 0px 0px;
 padding-top: 1px;
}

padding-topを追加。

次に、「パスワードをお忘れですか?」の部分を移動させる為に、jsファイルに以下を追記してください。

var $LosgPass = $(".login #backtoblog").clone();
$(".login #backtoblog").remove();
$(".login #loginform").after( $('<div>').append( $LosgPass ).html() );
var $LosgPass = $(".login #nav").clone();
$(".login #nav").remove();
$(".login #loginform").after( $('<div>').append( $LosgPass ).html() );

これで、ほぼ完成してきました。

ほぼ完成図
ほぼ完成図

この時点で一旦、IETesterを使用して、IE8で確認しましたが、表示の崩れはありませんでした。

 

最後に、ログインフォームのデザインを変更していきます。

ちなみに、これはヤフーのログインフォーム。

ヤフーのログインフォーム
ヤフーのログインフォーム

Yahooのログインフォームの場合、「ユーザー名」「パスワード」という表記部分が、入力する部分に記載されているかのように見え、クリックすると真っ白になります。

WordPressのログインフォームのソースは以下のようになっています。

ログインフォームのソース
ログインフォームのソース

このソースをベースに、色々と改変していきます。

ここは少し難しいです。

まず、ユーザー名と記載されている部分が、一切タグで囲まれていないのでとても扱いづらい。

なので今回はspanタグで囲み、CSSを適用してカスタマイズする事にしました。

その囲ったspanタグは、inputにfocus&blurした際に、IDが入力されているかどうかのチェックで表示するorしない。と表示を変更する仕様にします。

jsファイルは以下。

var $UserField = $(".login #loginform p:eq(0)");
 var $UserFieldClass = $("label" , $UserField).attr("for");
 var $UserFieldValue = $("input" , $UserField).val();

 $UserField.attr( "class" , $UserFieldClass );
 $("label br" , $UserField).remove();

 $("label" , $UserField).contents().filter(function() {
 return this.nodeType == 3 && !/\t/.test(this.data);
 }).wrap("<span/>");

if( $UserFieldValue != "" ) {
 $("span" , $UserField).hide();
 } else {
 $("span" , $UserField).show();
 }

$("input" , $UserField).focus(function() {
 $("span" , $UserField).hide();
 });
 $("input" , $UserField).blur(function() {
 if( $("input" , $UserField).val() != "" ) {
 $("span" , $UserField).hide();
 } else {
 $("span" , $UserField).show();
 }
 });

 var $PassField = $(".login #loginform p:eq(1)");
 var $PassFieldClass = $("label" , $PassField).attr("for");
 var $PassFieldValue = $("input" , $PassField).val();

 $PassField.attr( "class" , $PassFieldClass );
 $("label br" , $PassField).remove();

 $("label" , $PassField).contents().filter(function() {
 return this.nodeType == 3 && !/\t/.test(this.data);
 }).wrap("<span/>");

if( $PassFieldValue != "" ) {
 $("span" , $PassField).hide();
 } else {
 $("span" , $PassField).show();
 }

$("input" , $PassField).focus(function() {
 $("span" , $PassField).hide();
 });
 $("input" , $PassField).blur(function() {
 if( $("input" , $PassField).val() != "" ) {
 $("span" , $PassField).hide();
 } else {
 $("span" , $PassField).show();
 }
 });

cssは以下。 

.login #loginform p {
 position: relative;
}
.login #loginform p label span {
 position: absolute;
 font-size: 16px;
 top: 10px;
 left: 8px;
}
.login #loginform .user_pass {
 width: 70%;
 float: left;
}

ただ、このままだと、

jscss適用後
jscss適用後

float のおかげで表示が崩れます。なので、追加でjsファイルに以下を。

var $Forget = $(".login #loginform .forgetmenot").clone();
 $(".login #loginform .forgetmenot").remove();
 $(".login #loginform .submit").after( $('<div>').append( $Forget ).html() );

$(".login #loginform .forgetmenot").after( '<div class="clear"></div>' );

これで、どうでしょう。ばっちりじゃないでしょうか。念の為IEでチェック。

IE8  & IE9 での表示チェック
IE8  & IE9 での表示チェック

ばっちりですね。

ユーザー名をクリックすると、

ユーザー名クリック
ユーザー名クリック

入力フィールドが空になります。ユーザー名を入力すると、その入力名を維持しているように見えます。

これで、完璧。なんじゃないかな。 🙂

あとは背景やログインフォーム部分をもう少し凝ったりして、

ログイン画面サンプル
ログイン画面サンプル

このようにもできるはずです。是非お試しください。

写真:http://www.pakutaso.com/

クライアントに納品するWordPressの管理画面カスタマイズ vol.5

前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.4 にて、ログイン画面のカスタマイズをおこない、ほぼカスタマイズ完了と言える状態となりました。

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

クライアントさんが管理画面にログインした際に、今の契約内容は一目で分かるほうがいいですよね。

各レンタルサーバがやっているようなイメージ。

ロリポップの契約内容画面
ロリポップの契約内容画面

こういった契約状況や、制作会社からクライアントへのお知らせ等を、管理画面内のダッシュボードに表示させたいと思います。

 

プラグイン Announce from the Dashboard をまずはインストール

announce from the dashboard インストール
announce from the dashboard インストール

Announce from the Dashboard をインストールし、有効化すると、サイドメニューの「設定」の中にメニューが作られます。
日本語の環境だと、「ダッシュボードお知らせ」というメニューです。

メニュー表示
メニュー表示

Announce from the dashboardの設定画面に移ると、ダッシュボードに表示したい内容、権限、お知らせの種類を選択できるので、それぞれ入力・選択していきます。
  (ここは例として、ロリポップの契約期間の真似をしています。)  

ダッシュボードへのお知らせ作成例
ダッシュボードへのお知らせ作成例

 

こんな感じですね。これで保存します。
これで、指定した権限のユーザー(ここではクライアント)に現在の契約内容が表示されるようになります。

お知らせ設定後
お知らせ設定後

注意を引く赤枠で囲ったり、通常のメタボックスのような表示もできます。

また、いくつでもお知らせを作ることができるので、契約内容とは別のお知らせをつけることもできます。

 

次は クライアントに納品するwordpressの管理画面カスタマイズ vol.6 にて、投稿画面のカスタマイズとなります。

 

クライアントに納品するWordPressの管理画面カスタマイズ vol.4

vol.1~vol.3 までで、管理画面のカスタマイズはほとんど終えたと思います。
前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.3

 

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

次は、デフォルトのログイン画面をカスタマイズします。

 

ログイン画面

ログイン画面
ログイン画面

これがデフォルトのログイン画面。WordPressのロゴがあり、クリックするとWordPress.orgのサイトへ飛びます。

別にこの状態を変更する必要は無いですが、特にWordPress.orgにリンクさせる必要もないと思います。
逆に、WordPress.orgにジャンプすると「これ何ですか?」となって、説明するのがちょっと大変。。。

なので、この状態をカスタマイズします。

 

ログインフォーム

ログインフォーム設定
ログインフォーム設定

この項目はログインフォームのロゴのカスタマイズができます。
ログをクリックするとクライアントサイトのトップにジャンプするように。
ロゴのタイトルはクライアントサイトの名前になるようにカスタマイズできます。

例ですが、ロゴ画像をクライアントのロゴ画像に変更する場合。

ログインフォーム設定例1
ログインフォーム設定例1

こんな感じです。これで、ログイン画面を確認してみます。

ログイン画面2
ログイン画面2

おっと、ロゴ画像を用意するのを忘れていました。

とりあえず、適当にロゴ画像を用意して、指定したディレクトリに入れると、

ログイン画面3
ログイン画面3

ものすごく、ロゴの画像がつぶされてしまいました。 😳
元のロゴ画像のサイズを調べてみると、幅(width)274px、高さ(height)63pxのようなので、そのサイズにロゴ画像を調整して、もう一度確認すると…

ログイン画面4
ログイン画面4

これでよさそうです。

あとはお好みで、独自のCSSを読み込んだり、フッターにテキストを追加してください。

もっとログイン画面をカスタマイズしたいという方は、クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5をご覧ください。

次は、クライアントに納品するwordpressの管理画面カスタマイズ vol.5 で、クライアントの管理画面のダッシュボードに、現在の契約内容やお知らせを表示する方法です。

クライアントに納品するwordpressの管理画面カスタマイズ vol.3

前回はサイドメニューまで終えました。
前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.2

 

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

次はメタボックスの設定に移ります。
メタボックスとは…投稿や固定ページ作成にある、アイキャッチやフォーマットの類のことです。
リビジョンやスラッグとか、クライアントによっては必要ないときもありますよね(ない?)。

メタボックスの例
メタボックスの例

 

 

メタボックス削除

ここまでくると、あまり設定についての説明が不要な気がしてきました。(疲れただけ…?
そんなことはさておいて。。。とりあえず設定します。

投稿・固定ページともに不必要なメタボックスとして、

  • アイキャッチ
  • 抜粋
  • トラックバック送信
  • カスタムフィールド
  • ディスカッション
  • コメント
  • スラッグ作成者
  • リビジョン
  • フォーマット
  • タグ

を削除します。(ほとんど。 😯

メタボックス削除設定例
メタボックス削除設定例

どうですか?このようにシンプルになりましたか?

メタボックス削除設定例2
メタボックス削除設定例2

これで投稿画面はカスタマイズができ、クライアント向けになりました。
だけど、投稿一覧固定ページ一覧の表示もカスタマイズしたくなりますよね。

投稿一覧画面
投稿一覧画面

これもカスタマイズするので、別のプラグインを用意します。

 

Post Lists View Custom

プラグイン「Post Lists View Custom」をインストールしてください。
Post Lists View Custom

post list view custom 検索

インストールし、有効化するとサイドメニューの「設定」の下に、「Post Lists View Custom」メニューが追加されているので、そこから投稿一覧表示設定をクリックしてください。

post lists view custom 設定画面

 

カスタムフィールドを使っている場合、カスタムフィールドも投稿一覧内に表示させることができます。

上の「表示する」の項目が、投稿一覧に表示される項目となります。
今回は、タイトル、カテゴリー、日時 の3つだけにします。

post lists view custom 設定例1
post lists view custom 設定例1

これで、投稿一覧のカスタマイズができました。この調子で固定ページ一覧もカスタマイズしてください。

post lists view custom 適用例
post lists view custom 適用例

 

これで、管理画面のほとんどをカスタマイズできました。
次は、クライアントに納品するwordpressの管理画面カスタマイズ vol.4での、
ログイン画面のカスタマイズに進んでください。

クライアントに納品するWordPressの管理画面カスタマイズ vol.2

前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.1 にて、管理画面の全般に関するカスタマイズをおこないました。

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1 
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

次は「ダッシュボード」のカスタマイズに移ります。

 

ダッシュボード

クライアントには、WordPress ブログやWordPressフォーラムなんて必要ないと思います。

ダッシュボード設定画面
ダッシュボード設定画面

なので、表示したくないものに関してチェックを入れれば、表示されなくなります。

ダッシュボード設定例
ダッシュボード設定例

 

 

次はAdmin bar (管理バー)

管理バー設定
管理バー設定

左上にwordpressのロゴがあったり、コメントを使ってないのにコメントの新着が見れたりと、デフォルトの管理バーでは不便があるので、カスタマイズします。

「左」と「右」の項目2つがありますが、これは左上の管理バーメニューと右上の管理バーメニューのことです。

まずは、左上メニューのwordpressロゴ部分を削除してみます。
「左」項目のロゴ画像があるところ(wp-logo)の右の下向き三角をクリックします。
すると、そのメニュー内にある、サブメニュー一覧が表示されます。

ロゴ設定
ロゴ設定

で、ロゴは要らないので、削除をクリック。

ロゴ削除
ロゴ削除

この調子でコメントも必要ないなら削除。

次は右の項目。こんちはっす、○○○さん!とかも必要ないし、ログアウトだけで充分じゃないかと思います。
なので、こんにちは~の部分から一式削除。

これで、だいぶすっきりしてきました。

管理バー設定例1
管理バー設定例1

次に、右項目にログアウトを挿入してみます。
下の追加できるメニュー一覧から、ログアウトをドラッグ&ドロップで右項目へひっぱってください。

管理バー設定例2
管理バー設定例2

これで、右項目にログアウトが挿入されるはずです。

管理バー設定例3
管理バー設定例3

あ、「保存」をするのを忘れずに。
それと、外部リンク等を個別につけたいときは、「custom_node」をひっぱって挿入してください。

管理バー設定例4
管理バー設定例4

どうですか?ごっごる(外部リンク)は表示されましたか?

管理バー設定例5
管理バー設定例5

次は、サイドメニューをカスタマイズします。

 

サイドメニュー

サイドメニュー設定
サイドメニュー設定

まずは、クライアント向けに必要の無い項目を削除していきます。

  • ダッシュボード > 更新
  • ダッシュボード > ホーム
  • 投稿 > タグ
  • リンク
  • コメント
  • 外観
  • プラグイン
  • ユーザー
  • ツール
  • 設定 > ディスカッションやらプライバシーやら

は必要ないとして、削除します。
(削除の仕方はさきほどのAdmin bar の時と一緒です。右の矢印をクリックして削除。追加するなら、右のメニュー一覧から引っ張ってメニューを追加)

あ、お好みで右のメニュー一覧より、区切り線(Separator)などをひっぱって挿入して、見やすくしてください。

サイドメニュー設定例1
サイドメニュー設定例1

さっぱりしました。あ、保存は忘れずに。

ただ、ここで注意して欲しい事があります。
それは、今の状態ではこのメニューの通りの表示にならないという事

なぜ?って思いますよね。

画面を見てもらったほうが一番分かりやすいと思いますので、前回作成したクライアント用アカウントでログインした画面を貼り付けます。

サイドメニュー表示例
サイドメニュー表示例

一瞬、出来てるじゃないか。って思いますが、よーく設定したメニューと見比べてください。
「設定」のメニューが無いのが分かりますか?

WordPressは各ユーザーに権限グループ(編集者とか管理者とか購読者とか)を振り分けることが出来ます。
この権限グループには予め、「設定や追加、編集できる項目」が決められています。(自分自身や他プラグインを利用して変更する事は可能です)

編集者にはもともと、「設定」を変更する権限を持っていません。

なので、作成したユーザー(編集者) では、 「設定」 は変更できない。
編集者には「設定」のサイドニューは表示されない

これを変更できるようにする為には、ユーザーの権限を変更するプラグイン等を用いて変更してください。ここでは例として、「User Role Editor」というプラグインを利用した場合の変更方法をご紹介します。

User Role Editor
※管理画面のプラグインからインストールしたほうが楽です。

userroleeditorメニュー
userroleeditorメニュー

インストールすると、
ユーザー > User Role Editor
のメニューが追加されているので、クリックしてください。

 

 

 

User Role Editor の設定画面になります。
まずはユーザー権限を選択します。
ここでは編集者を選択してください。

User Role Editor 設定画面
User Role Editor 設定画面

選択した途端、一瞬で画面が変わるので分かりづらいですが、チェックされている項目とチェックされていない項目がいくつかあります。今回は「設定」を表示したいので、「manage_options」という項目を探し、チェックをいれます。

manage_optionsチェック
manage_optionsチェック

これで、保存をして、編集者でログインすると…

サイドメニュー設定例3
サイドメニュー設定例3

サイドメニューに「設定」が表示されるようになりました。
追加メニューが表示されない等の場合は、このようにユーザーの権限を変更してみてください。

 

次は、「メタボックス削除」以降の設定例になります。

クライアントに納品するwordpressの管理画面カスタマイズ vol.3

 

クライアントに納品するWordPressの管理画面カスタマイズ vol.1

こんにちは。gqevu6bsiz です。 このページでは、クライアントにwordpressをCMSとして納品する際に、管理画面をカスタマイズして納品したい人で、あまりfunctions.phpに色々と書きたくない人や、何かを非表示にする際にしょっちゅうgoogleで検索してコピペするのが面倒な人向けに、gqevu6bsiz が作成したプラグインを利用して、おすすめのカスタマイズ法を紹介します。 Webの知識があまり無いクライアント様向けに、余計なものを触れないようにカスタマイズしたいWeb制作者を想定しています。

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1 
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

 

カスタマイズ完成図

カスタマイズ完成イメージ
wordpressの管理画面カスタマイズイメージ図

だいぶシンプルにカスタマイズします。 基本的にクライアントには既存ページの更新(固定ページ)と、イベントや新商品の発表や新着情報を行う(投稿)ぐらいを想定しています。

まずは、wordpressをいつも通りにインストールしましょう。

とりあえず、wordpressをインストールします。 インストールが完了すると、すぐにログイン画面が出てくるのでログインします。

ログイン画面
ログイン画面

 

ログイン後、まずはクライアント向けの「ユーザー」を作成。

インストール後のwordpressは、ユーザーがadminしかありません。 クライアントにログインしてもらうアカウントは、この管理者用のアカウント「admin」とは別のアカウントを用意します。 ※この説明では、クライアント用アカウントの権限を「編集者」にします。

ユーザー作成後
ユーザー作成後

クライアント用ユーザー「編集者」を作成しました。 クライアント用ユーザーの管理画面のみカスタマイズをしていきます。

 

ここで、まずはプラグインをダウンロードしてください。

私のプラグインを利用した場合のカスタマイズ方法です。 管理画面のカスタマイズ用のプラグイン「WP Admin UI Customize」をインストールしてください。

プラグイン検索画面
プラグイン検索画面

インストールを終え、有効化すると、サイドメニューの「設定」の下に、「WP Admin UI Customize」のメニューが表示されますので、クリックしてください。

管理メニュー
管理メニュー

 

カスタマイズを適用する権限を選択

さきほどクライアント用のアカウントを「編集者」として作成しましたので、カスタマイズを適用する権限のグループから、「編集者」にチェックを入れて保存をクリックしてください。

権限グループの選択
カスタマイズを適用する権限グループを選択

※プラグインに満足いただけた場合、宜しければ寄付のご検討をお願いします。

「サイトの設定」はいまはおいといて、「管理画面設定」を選択

管理画面設定メニュー
管理画面設定メニュー

管理画面に関する、アップデートの通知やフッターに関する設定画面です。

管理画面設定
管理画面設定

 

通知

通知 WordPress コアアップデート通知

wordpress本体のアップデート通知を表示するかどうか。下の黄色帯のようなヤツ(複数そのような通知する箇所があります)。

コアアップデート通知
コアアップデート通知

 

プラグインアップデート通知

インストールしているプラグインで、有効にしているかどうかは関係なく、プラグインのアップデートがあれば、通知する機能

テーマアップデート通知

インストールしているテーマで、有効にしているかどうかは関係なく、テーマのアップデートがあれば、通知する機能   基本的にクライアントにこの全ての通知を表示する必要はないと思うので、全てにチェックをいれます。

 

表示オプションとヘルプタブ

表示オプションとヘルプタブ  表示オプション

投稿や固定ページなど、色んなページの右上にいるアイツです。これを表示したくない場合はチェック。 表示オプションとヘルプタブ位置

ヘルプ

表示オプションの隣にいるアイツです。こちらもいらないならチェック。

 

フッター

フッター部分のテキストを変更できます。HTMLタグも使用可能です。

フッター
フッター

ここではクライアント用に、お問い合わせ先を記載してみます。

フッター適用例
フッター適用例

 

一般

一般-css読み込み
一般-css読み込み

ここは管理画面に独自のCSSを読み込みたい場合にのみ使用します。試しに読み込んで使用してみます。 cssの内容は以下の内容です。(サンプルとして、サイドメニューの色を、オレンジにします。)

#adminmenuwrap { background-color: orange; }
css設置例
css設置例

このcssをコピペで作成して、ファイル名を「admin.css」とします。
このadmin.cssを、「themes」のディレクトリにアップロードします。

 

 

次に、このCSSまでのパスを記述します。WP Admin UI Customize はいくつかの変数(ショートコードみたいな)を使用できるようにしています。 アップロード先は wp-content / themes 内なので、[blog_url] 変数を利用して、

[blog_url]/wp-content/themes/admin.css

と記入します。

css読み込み例
css読み込み例

これで編集者の管理画面のみ、CSSが読み込まれます。先ほど書いたCSSが無事読み込まれると、

サイドメニューcss適用例
サイドメニューcss適用例

はい、なんとも見づらいメニュー色の設定ができました。(笑 あとは、お好みでCSSを適用させてください。   次は、「ダッシュボード」以降の設定例になります。

クライアントに納品するwordpressの管理画面カスタマイズ vol.2