サポート » 使い方全般 » 記事の投稿画面のデザインをカスタマイズしたい

  • 解決済 hagemaru

    (@hagemaru)


    初めて投稿させていただきます。
    もし、フォーラムの使い方や投稿の内容などで間違っている点がございましたら、
    指摘していただけますとありがたいです。

    今回のご質問なのですが、
    ワードプレスの投稿画面のデザインのカスタマイズを考えています。
    友人数名と共同でサイトを構築しておりまして、
    「ワードプレスっぽくない見た目のデザインが出来たら面白い」という話が持ち上がったので、
    今回投稿させていただきました。

    具体的には、
    ・現在の投稿画面の背景の色を変更したい
    ・カテゴリーやタグなどのグレーの部分の色や形といったデザインを変更したい
    などといった感じです。

    ヘンな話ですが、
    ワードプレスを知っている人が投稿画面を見た時に、すぐにワードプレスの投稿画面だとわからないようなデザインに変えることが出来ればと考えています。
    投稿画面でワードプレスらしさが無くなる(表現は不適切ですが)ようなデザインの
    カスタマイズが出来ると、クライアント向け、ユーザー投稿型のサイトの構築の一部など、様々な意味でより幅が広がるかとも思いました。

    また、調べてみますと、CSSでの編集が多く見受けられました。
    ただ、CSSを投稿画面にどう応用していいか、などもいまいちよくわかりませんでした。
    そのため、
    ・投稿画面へのCSSの具体的な適用方法
    ・CSS以外で有用なプラグイン
    などを教えていただけますと、非常にありがたいです。

    文章が長くなってしまい申し訳ありません。
    良い意味でワードプレスらしさが感じられない投稿画面のデザインの変更方法を教えて頂ける方がいましたら、ぜひ回答をよろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • CSSで上書きしていくならadmin_headなどのフックを使用してみてはどうでしょうか。
    直接CSSを吐き出すことも可能ですし、外部ファイルを読み込むことももちろん可能です。

    add_action( 'admin_head', 'my_admin_head' );
    function my_admin_head() {
    	echo '<style type="text/css">
    			body {
    				background: #000;
    			}
    		  </style>
    	';
    }

    上記のコードですと管理画面全体に反映されてしまいますが、以下のように書くと特定のページに反映することが可能です。

    新規投稿 画面に適用
    add_action( 'admin_head-post-new.php', 'my_admin_head' );

    投稿編集 画面に適用
    add_action( 'admin_head-edit.php', 'my_admin_head' );

    Plugin API/Action Reference/admin head « WordPress Codex

    モデレーター gatespace

    (@gatespace)

    トピック投稿者 hagemaru

    (@hagemaru)

    >>Tsuyoshi.さん

    返信遅くなって申し訳ありません。
    admin_headの具体的な使用方法をもう少し詳しく教えて頂けるとありがたいです。
    functions.phpに入れて使用してみましたが、使い方がいまいち理解しておらず、
    特に変化が見られませんでした。
    他のサイトも調べてみましたが、詳しく書かれているサイトが見つけられませんでした。
    すいません、できれば回答よろしくお願いします。

    トピック投稿者 hagemaru

    (@hagemaru)

    >>gatespaceさん

    返信遅くなって申し訳ありません。
    Cawaii Adminは以前使用させていただいておりましたが、
    投稿画面での公開ボタンの色、タグやカテゴリーなどのグレーな感じなどが残ってしまい、
    変えられないかと思いました。
    もし、投稿画面の細部まで変更できるような方法がございましたら、
    教えて頂けるとありがたいです。
    よろしくお願いします。

    hagemaruさんこんにちは。

    functions.phpに入れて使用してみましたが、使い方がいまいち理解しておらず、
    特に変化が見られませんでした。

    どのように書かれたかはわかりませんが、WordPress3.4.2で変化は見られたので上手くいかないという場合は先ずご自分の書かれたコードや環境、バージョンなどを提示するようにお願い致します。

    以下のトピックに全て目を通して下さいね。
    問題解決のためのチェックリスト

    で、ちょっと補足しますね。

    以下のコードをfunctions.phpに記述しますと管理画面のhead部分に指定した文字列を出力することが可能です。これを利用してCSSを出力しています。

    /**
     * 管理画面のhead部分にCSSを表示する
     */
    add_action( 'admin_head', 'my_admin_head' );
    function my_admin_head() {
    	echo '<style type="text/css">
    			body {
    				background: #000;
    			}
    		  </style>
    	';
    }

    さてこの方法でCSSを上書きしていく時ですが、CSSが適用されていないという場合ブラウザのソースを表示などでCSSが表示されているか、キャッシュが残っていないか、WordPressが先に読み込んでいるCSSがある筈なので優先順位なども確認する必要があります。

    先ずはその辺りをご覧下さい。

    ブラウザでソースを見て上記のCSS

    <style type="text/css">
    body {
    	background: #000;
    }
    </style>

    の部分が表示されているのなら後はご自身でカスタマイズしていくだけです。
    上記の場合ですとhead内に直接CSSを書いてしまっているので外部ファイルにして読み込むと良いと思います。

    トピック投稿者 hagemaru

    (@hagemaru)

    返信遅くなってしまい申し訳ありませんでした。

    プラグインなどを始め様々な工夫をしましたところ、
    ver.3.3でしたが、機能するようになりました。

    反映されない具体的な理由がはっきりできませんでしたが、
    デザインの変更は出来るようになりましたので、解決済みとさせていただきます。

    ありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「記事の投稿画面のデザインをカスタマイズしたい」には新たに返信することはできません。