デザイナーなら気になる部分の修正方法【初心者のためのWORDPRESS -04-】

Public Relation TEAM

こんにちはこんばんはおはようございます。デザイナーの野田沢です。

今回は表題の通りフロントサイトの構築とは少し離れますが、デザイナーの方なら気になってしまう部分の修正方法をいくつかご紹介したいと思います。

テーマのサムネイル画像を変更する

tn04-01

wordpressにデフォルトでインストールされているテーマをカスタマイズして構築している方は共感いただけるかと思いますが、管理画面より外観＞テーマから使用するテーマを選択できますよね。

ただせっかくカスタマイズしてオリジナルに近いテーマを作っても、ここのサムネイル画像が初期のままだとテンションも半減。。。

別に必要ないといえば必要ない部分ではありますが、気持ち悪いですよね。

なので自分のモチベーションを高めるためにもここを変えます。

サムネイルのタイトルを変更する

テーマフォルダの直下にあるstyle.cssの2行目 Theme Name を任意の名前に変更します。

サムネイル画像を変更する

テーマフォルダの直下にある screenshot.png を任意で作成した画像に上書きします。
画像サイズ：600 x 450px

とても簡単です。たったこれだけでモヤモヤしないで実務に専念できます！

サイト上のステータスバーを非表示

管理画面にログインしている状態だと、フロントサイト上にも管理画面用のステータスバーが表示されるんですね。

こまめにブラウザチェックをしていると結構これが邪魔になってきます。

なので非表示にしちゃいます。

functions.phpに下記を追記します。

add_filter( 'show_admin_bar', '__return_false' );

これでブラウザチェックもしやすくなりました！

ただ便利な機能なのでfixした後は元に戻してもいいかもしれません。

絵文字化機能を無効

WordPress 4.2以降はデフォルトで絵文字のスクリプトが入っているようです。
デザイン性を統一したいサイトの場合絵文字が邪魔になってしまうこともあると思います。

この機能を無効化するには、プラグイン「Disable Emojis」が便利です。

使い方はインストールしたDisable Emojisを有効化するだけ！

もちろん元に戻したい時はプラグインを無効にすればOKです。

ワードプレスのログイン画面をオリジナルにカスタマイズ

tn04-02

これがおなじみのwordpressのログイン画面です。

なんとここもオリジナルにカスタマイズすることができます！

これは高まります！

functions.phpに下記のコード挿入し、割り当てられてるcssで見栄えを変更していきます。

// ログイン画面の変更
function custom_login() { ?>
	<style>
		/* ここにスタイルを記述 */
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login' );

cssの各セレクタは下記の通り

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

私が参考にさせて頂いたNxWorld様のサイトにて詳しく紹介されているので御覧ください。 WordPress：ログイン画面をオリジナルにカスタマイズする方法

いかがですか？

こういった内部もカスタマイズしていくことでモチベーションも高まり、制作意欲につながっていくと思います。

そうすることでアウトプットにも+αが乗っかりより良いモノが作れるような気がします。

“こだわり”は常に忘れることのないようにしたいですね。

それでまた次回っ！