前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.4 にて、ログイン画面のカスタマイズをおこない、ほぼカスタマイズ完了と言える状態となりました。
- クライアントに納品するwordpressの管理画面カスタマイズ vol.1
- クライアントに納品するwordpressの管理画面カスタマイズ vol.2
- クライアントに納品するwordpressの管理画面カスタマイズ vol.3
- クライアントに納品するwordpressの管理画面カスタマイズ vol.4
- クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
- クライアントに納品するwordpressの管理画面カスタマイズ vol.5
- クライアントに納品するwordpressの管理画面カスタマイズ vol.6
クライアントさんが管理画面にログインした際に、今の契約内容は一目で分かるほうがいいですよね。
各レンタルサーバがやっているようなイメージ。
こういった契約状況や、制作会社からクライアントへのお知らせ等を、管理画面内のダッシュボードに表示させたいと思います。
プラグイン Announce from the Dashboard をまずはインストール
Announce from the Dashboard をインストールし、有効化すると、サイドメニューの「設定」の中にメニューが作られます。
日本語の環境だと、「ダッシュボードお知らせ」というメニューです。
Announce from the dashboardの設定画面に移ると、ダッシュボードに表示したい内容、権限、お知らせの種類を選択できるので、それぞれ入力・選択していきます。
（ここは例として、ロリポップの契約期間の真似をしています。）
こんな感じですね。これで保存します。
これで、指定した権限のユーザー（ここではクライアント）に現在の契約内容が表示されるようになります。
注意を引く赤枠で囲ったり、通常のメタボックスのような表示もできます。
また、いくつでもお知らせを作ることができるので、契約内容とは別のお知らせをつけることもできます。
次は クライアントに納品するwordpressの管理画面カスタマイズ vol.6 にて、投稿画面のカスタマイズとなります。
ありがとうございました！！とても参考になりました。
4.5の記事を読ませて頂きました。
＞まずは、javascriptファイルを読み込ませる為に、functions.phpに以下を記載。
このjsを読み込ませるというところから先に進めないです。
テストのjsすら読み込まないのですが、なにが原因かわからないです。
どうすればいいでしょうか。
坂井さん
jsファイルを読み込まない。との事ですが考えられる原因として
が考えられます。
まずは、ログインページのソースから、指定したjsファイルの読み込み記述があるかどうか確かめてみて下さい。
例えばfunctions.phpに、
function mylogin() {
wp_enqueue_script( 'my-login-js' , '/my-login.js' , array( 'jquery' ) );
}
add_action( 'login_head' , 'mylogin' );
このように記述すると、
<script type=’text/javascript’ src=’サイトURL/my-login.js?ver=****’></script>
のような読み込み指定が追加されます。
また、Wordpressのバージョンは最新を使用して試してみてください。
ご回答ありがとうございます。
jsを読み込む事が出来ました。
その後、一通りの流れは全て反映出来ている感じなのですが、画像を差し替えても反映されない等の状態になっています。
キャッシュ関係のプラグインは一切入れず、wordpressインストール時のまっさらな状態で今回は実施しています。
あと、出来上がりの状態がフォームの部分等が透明になっていなかったりするのですがこれはどうすればいいのでしょうか。出来上がりのサンプル版があれば頂けると嬉しいです。
坂井さん
まずはjsファイルが読み込まれたようでよかったです。 🙂
こちらの状況ですが、wordpressのキャッシュではなく、ブラウザのキャッシュの可能性が高いです。
等をしてみてください。
こちらは、フォームの背景色をRGBAで指定しただけです。
rgbaでの背景色の指定は、全てのブラウザで表示される訳ではないと思いますので、あまりおすすめはできませんが、一応CSSの設定を記述しますね。
薄い白のpng画像をリピートさせた指定のほうが、より多くのブラウザで表示されるかもしれません。
body.login {
background: #fff;
}
#login {
width: 950px;
margin: 0 auto;
padding: 10px 0;
}
#login h1 {
padding: 18px 0;
float: left;
}
#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 .head_link {
float: right;
width: 270px;
padding: 24px 14px 0;
text-align: right;
}
.login form {
width: 275px;
margin: 10px 10px 0 auto;
background-color: rgba(255, 255, 255, 0.8);
}
.login #nav, .login #backtoblog {
width: 275px;
margin: 10px 10px 0 auto;
}
.login .footer {
width: 950px;
margin: 0 auto;
text-align: center;
border-top: 1px solid #777;
padding: 10px 0 12px;
}
.my-login-form {
width: 950px;
height: 480px;
background: url(./login_bg.png) no-repeat 0px 0px;
padding-top: 1px;
}
.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;
}
ありがとうございます。
話は少し戻るのですが、141*36のロゴ隣に置いた「お問い合わせ」を右側に移動するのが上手く行かないです。
コードをそのままコピーしました。
この情報だけではちょっと原因を特定するのが難しいですが、とにかく、
h1部分にfloat left、
お問い合わせのhead_link部分にfloat right、
がきちんと適用されているかどうか、chromeのデバッグ等で確認してみてください。
＞お問い合わせのhead_link部分にfloat right、
chromeでみたところ上記が反映されていませんでした。
どうすればいいでしょうか。
そうですね。
考えられる原因としては、
という所じゃないかと思います。
head_linkにfloat以外のプロパティ(font-sizeやbackground等変更が分かりやすいもの）を試してみてください。
float だけが反映されないのか、head_linkに適用するスタイル全てが反映されないのか、原因がより分かるようになると思います。
すいませんちょっと見て頂いてもよろしいでしょうか。
—————————————–
#login {
width: 950px;
margin: 0 auto;
padding: 10px 0;
}
#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;
}
.login form {
width: 275px;
margin: 10px 10px 0 auto;
}
.login #nav, .login #backtoblog {
width: 275px;
margin: 10px 10px 0 auto;
}
.login .footer {
width: 950px;
margin: 0 auto;
text-align: center;
border-top: 1px solid #777;
padding: 10px 0 12px;
}
#login .head_link {
float: right;
width: 270px;
padding: 24px 14px 0;
text-align: right;
}
#login h1 {
padding: 18px 0;
float: left;
}
.my-login-form {
width: 950px;
height: 480px;
background: url(./login_bg.png) no-repeat 0px 0px;
}
.my-login-form {
width: 950px;
height: 480px;
background: url(./login_bg.png) no-repeat 0px 0px;
padding-top: 1px;
}
.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;
}
body.login {
background: #fff;
}
#login {
width: 950px;
margin: 0 auto;
padding: 10px 0;
}
#login h1 {
padding: 18px 0;
float: left;
}
#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 .head_link {
float: right;
width: 270px;
padding: 24px 14px 0;
text-align: right;
}
.login form {
width: 275px;
margin: 10px 10px 0 auto;
background-color: rgba(255, 255, 255, 0.8);
}
.login #nav, .login #backtoblog {
width: 275px;
margin: 10px 10px 0 auto;
}
.login .footer {
width: 950px;
margin: 0 auto;
text-align: center;
border-top: 1px solid #777;
padding: 10px 0 12px;
}
.my-login-form {
width: 950px;
height: 480px;
background: url(./login_bg.png) no-repeat 0px 0px;
padding-top: 1px;
}
.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;
}
お書きいただいたCSSを、丸久コピペしてみましたが期待通りの動作でした。
となると、CSSファイル以外の部分で
が怪しいと思いますので、ここを見直してみてください。
javascriptファイルはアップしておきます。
javascriptファイル
ありがとうございます。
無事、上手く設定が出来ました。
別件になるのですが、投稿画面のカスタマイズについてです。
不要なコンテンツ（タグやらリビジョンやら）を非表示にするだけではなく、デザインを変更する事は出来ないのでしょうか。
通常ですと、コンテンツエリアを左側、カテゴリやら属性やらのウィジェットを右側、という2カラム構成ですが、それぞれの幅を変えたり、3カラムにしてみたり等のカスタマイズです。
私の記事ではないですが、
投稿画面のウェジェットを2列にする
が参考になるのではないでしょうか？
行けました
ありがとうございます！！
おぉ、良かったですね！
では、また何かありましたらコメントなどよろしくです。