WordPress:ログイン画面のWordPressロゴマークを変更する

WordPressをインストールして、ログイン画面を表示するとWordPressのロゴマークが表示されます。

wordpress_admin_logo_1

このWordPressロゴオリジナルの画像に変更する時の方法をメモします。

また、ロゴに設定されているリンク先title属性を変更する方法も記載します。

お客様に管理画面の情報を渡す場合など、WordPressのロゴではなく独自のロゴを設定したい時に活用できます。


WordPressログイン画面のロゴを変更

ロゴに使用する画像を用意し、テーマディレクトリ内に設置します。

使用しているテーマの「functions.php」に下記のコードを記述します。

function login_logo_image() {
    echo '<style type="text/css">
            #login h1 a {
                background: url(' . get_bloginfo('template_directory') . '/login_logo.png) no-repeat !important;
            }
    </style>';
}
add_action('login_head', 'login_logo_image');

ロゴのサイズによってうまく表示されない場合は、
widthやheightなどを追加してスタイルを調整します。

また、CSSファイルを読み込んでスタイルを指定することも可能です。
CSSファイルを使用しているテーマディレクトリ内に設置します。

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

ロゴのリンク先を変更する場合

デフォルトではWordPressへのリンクが設定されています。

下記はブログのTOPページのURLを設定する時の方法です。

※functions.phpに追加

function login_logo_url() {
	return get_bloginfo('url');
}
add_filter('login_headerurl', 'login_logo_url');

「get_bloginfo(‘url’)」でブログのURLを設定しています。


ロゴのtitle属性を変更する場合

ロゴのtitle属性をブログの名前に変更する時の方法です。

※functions.phpに追加

function login_logo_title(){
	return get_bloginfo('name');
}
add_filter('login_headertitle','login_logo_title');

「get_bloginfo(‘name’)」でブログのサイト名を設定しています。


「wp-admin」ディレクトリ内のファイルを編集してもいいのですが、
WordPressをバージョンアップした時に編集した内容が上書きされてしまうので、
ロゴマークを変更したい場合は上記の方法で設定するといいと思います。

jQuery:日本地図を表示するjQueryプラグイン「Japan Map」

jQuery日本地図を表示することができるプラグインJapan Map」をご紹介します。

Japan Map ( jQuery plugin )

jquery_japan_map_1

このプラグインを使用するとjQueryで簡単に日本地図をページに表示することができます。

また、都道府県ごとに選択できるようになっているので、
クリック後にリンクやアクションを追加したりなど活用できそうです。

下記にjQueryプラグインJapan Map」を使用して、日本地図を表示させたときの設置方法をメモします。


Japan Mapの設置方法

下記URLより、「Japan Map」をダウンロードします。

http://takemaru-hirai.github.io/japan-map/

ダウンロードした「jquery.japan-map.js」を読み込みます。

共通で読み込むファイル

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./jquery.japan-map.min.js"></script>

【HTML】

<div id="map-container"></div>

【JS】

<script>
$(function(){
    $("#map-container").japanMap({
        onSelect : function(data){
            // 処理を記述します
        }
    });
});
</script>

ホバーした時に処理をする場合は下記のように記述します。

<script>
$(function(){
    $("#map-container").japanMap({
        onHover : function(data){
            // 処理を記述します
        }
    });
});
</script>

上記の設定をし、ページにアクセスすると日本地図が表示され、
都道府県ごとに選択することができます。

jquery_japan_map_2


また、都道府県ごとではなく、地方ごとに選択することも可能です。

さらに色やサイズを変更したり、他にも色々なオプションがあるので、
日本地図を使ってページを作るときに利用できそうです。

CSS:CSS3の「rgba()」で背景色を透過する方法

CSS3rgba()を使用して背景色透過した時の方法をメモします。

CSSで画像等を透過させたい場合は「opacity」を使用すると思いますが、
デザインによっては背景に指定した色のみ透過させたい場合があります。

その場合、「rgba()」を使用すれば背景色のみを透過させることが可能です
また、テキストやボーダーを透過させることもできます。


rgba()

RGBA値で色の指定をします。
rgba()は色の透明度まで指定することが可能です。

rgba(「0~255」,「0~255」,「0~255」,「0~1」)

最後の「0~1」がalpha値になります。
「0」に設定した場合は完全に透明になります。
また、「1」にした場合は透過されません。


rgba()で背景色を透過する

background-colorにrgba()を指定します。

CSS

#rgba {
	background-color: rgba(0,0,0,0.5);
}

【HTML】

<div id="rgba">
test
</div>

上記は背景を黒で指定して透過させています。
下記のように表示されます。

css_rgba_1


ちょっとわかりずらいので、alpha値を0~1まで指定した場合は下記のようになります。

css_rgba_2

テキストにrgba()を指定した場合は下記のようになります。

css_rgba_3

colorにrgba()を指定します。

#rgba {
	background-color: rgb(106,192,255);
	color: rgba(0,0,0,0.5);
	padding:10px;
}

背景画像の上に重ねて表示する場合などに使えると思います。
ただし、ブラウザによっては正常に動作しないものがあるので要注意です。

Javascript:画面上部に入力フォームの進捗状況を表示する「Fort.js」

入力フォームの画面上部に入力の進捗状況を示すプログレスバーを表示することができる、
JavascriptスクリプトFort.js」をご紹介します。

Fort.js

jquery_fort_js_1

「Fort.js」を使用するとフォームを入力した時に進捗状況のプログレスバーを
アニメーションで表示することができます。

ダウンロードはこちら

また、「Fort.js」はjQueryを使用しないで動作するスクリプトです。

下記にJavascriptスクリプトFort.js」を使用して進捗状況を知らせるプログレスバー
表示させた時の方法をメモします。

ライセンスはMITです。


「Fort.js」の使い方

「Fort.js」をダウンロードします。

共通で読み込むファイル

ダウンロードしたスクリプトとスタイルを読み込みます。
headタグに下記のコードを記述します。

<link rel="stylesheet" href="fort.min.css">
<script src="fort.min.js"></script>

HTML

bodyタグの後にプログレスバーを表示する時に使用するdivタグを記述します。

<body>
    <div class="top">
        <div class="colors"></div>
    </div>

JS

bodyの閉じタグの前に「Fort.js」のスクリプトを記述します。

    <script>
        solid();
    </script>
</body>

上記の設定をして入力フォームを設置するとフォーム入力時、
画面上部にプログレスバーが表示するようになります。

また、エフェクトは他にもあります。

solid()

flash()

gradient()

sections()


ログイン画面などの入力フォームで活用できそうです。
スタイルシートなどを変更すればプログレスバーの色やサイズなども変えることができます。

WordPress:TOPページのindex.phpとhome.phpの違い

WordPressTOPページを表示する「index.php」と「home.php」の違いをメモします。

WordPressで作成したサイトをカスタマイズする場合、使用しているテーマのディレクトリを参照します。

テーマによっては「index.php」と「home.php」が存在する場合があります。

どちらもTOPページを表示するテンプレートですが、両方存在する場合は「home.php」が優先されます。

また、「front-page.php」がある場合は「home.php」よりも優先されて表示されます。

下記にそれぞれの違いを記載します。


index.php

index.phpはTOPページに使用するテンプレートで、絶対に必要なファイルになります。

他にもカテゴリーやタグの一覧ページなどにも使用されます。
(ファイルが存在しない場合に出力)


home.php

home.phpはindex.phpよりも優先されて表示することができるTOPページのテンプレートです。

両方のファイルが存在する場合、home.phpが優先されてTOPページに使用されます。

TOPページを他のページと区別したい場合などに使用するのがいいと思います。

後、管理画面の表示設定で固定ページがフロントページに設定している場合は、
home.phpではなく固定ページがTOPページに表示されます。

wordpress_index_home1


front-page.php

front-page.phpはindex.phpとhome.phpよりも優先されて表示することができる
TOPページのテンプレートです。

front-page.phpが一番優先度が高いTOPページのテンプレートになります。

front-page.phpが存在する場合はhome.phpと違って、管理画面の表示設定で
固定ページがフロントページに設定されていても影響を受けずにfront-page.phpが表示されます。

wordpress_index_home2


上記のファイルは全てWordPressのTOPページに使用されるテンプレートですが、
出力される優先度が違います。

また、index.phpは必ず必要なテンプレートファイルになります。

なのでhome.phpとfront-page.phpはその時の用途によって使い分けるといいと思います。