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をバージョンアップした時に編集した内容が上書きされてしまうので、
ロゴマークを変更したい場合は上記の方法で設定するといいと思います。

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はその時の用途によって使い分けるといいと思います。

WordPress:アイキャッチ画像の確認と出力

WordPressアイキャッチ画像を表示する場合のアイキャッチの存在確認出力方法をメモします。

アイキャッチが設定されているかどうか調べる場合は「has_post_thumbnail()」関数を使用します。
また、「the_post_thumbnail()」関数でアイキャッチ画像を出力することができます。

下記にWordPressの「has_post_thumbnail()」「the_post_thumbnail()」の説明と記述方法を記載します。


has_post_thumbnail()

アイキャッチ画像が設定されているか確認します。

has_post_thumbnail()

記事を指定してアイキャッチ画像の確認を行う場合は
引数に記事IDを記述します。

has_post_thumbnail(記事ID)

アイキャッチ画像が設定されている場合はtrue、
設定されていない場合はfalseを返します。


the_post_thumbnail()

アイキャッチ画像を出力します。

the_post_thumbnail()

引数を指定することによってアイキャッチ画像のサイズやクラスなどを設定することが可能です。

the_post_thumbnail(サイズ, 属性)

サイズや属性は配列で指定します。


アイキャッチ画像の確認と出力

アイキャッチ画像が存在するかどうかを「has_post_thumbnail()」を使用して確認します。

アイキャッチ画像が存在する場合は「the_post_thumbnail()」で出力します。
存在しない場合は「no image」などを出力するといいと思います。

<?php
// アイキャッチ画像の確認
if ( has_post_thumbnail()) {
    // 存在する
    the_post_thumbnail();
}
else {
    // 存在しない
    echo '<img src="noimage.jpg">';
}
?>

投稿記事をループさせて上記のコードを記述するようにすれば、
アイキャッチ画像を表示することができます。

<?php if (have_posts()): ?>
<?php while (have_posts()): the_post(); ?>
    <div>
    <?php if (has_post_thumbnail()): ?>
        <?php the_post_thumbnail(array(200, 200), array( 'class' => 'thumbimg')); ?>
    <?php else: ?>
        <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" />
    <?php endif; ?>
    </div>
<?php endwhile; ?>
<?php endif; ?>

アイキャッチ画像を使用するとその記事がどのような内容なのかを一目で閲覧者に伝えることができるので、
記事にあった画像を用意できれば、設定した方がいいと思います。

WordPress:パーマリンクの取得はget_permalink()を使用する

WordPress投稿情報リンクURLを取得する時の方法をメモします。

取得した投稿情報のデータを見ると下記のように「guid」に記事のURLが入っています。

※例

Array
(
    [0] => WP_Post Object
        (
            [ID] => 1
            ・
            ・
            ・
            [guid] => http://raining.bear-life.com/?p=1
            ・
            ・
            ・
        )
)

「guid」にURL情報があるので、これを使ってしまいそうですが、
パーマリンクを取得する場合はget_permalink()を使用します。

get_permalink()にパーマリンクを取得する記事のIDを指定します。

<?php echo get_permalink($post->ID); ?>

パーマリンクを変更していない場合は「guid」のURLを使用してもいいのですが、
パーマリンクの設定を変更している場合は、「guid」のURLと表示されるURLが違うので
「get_permalink()」を使用してパーマリンクを取得した方がいいと思います。

WordPress:別階層に設置したWordPressの最新記事をTOPページに表示

WordPressを設置する時にドキュメントルートにブログ用のディレクトリを作成してインストールする場合があります。

その際に別階層にある静的ページ(TOPページなど)で「wp-load.php」を読み込めば、
WordPressで投稿した最新記事情報を取得し自動で反映させることが可能です。

「wp-load.php」を読み込んだページはWordPressの関数が使用できるようになるのです。

下記に静的ページで「wp-load.php」を読み込み、別階層に設置したWordPress最新記事情報を取得する方法をメモします。


別階層のWordPressの最新記事を静的ページに表示

※wpディレクトリにWordPressをインストールした場合

phpのファイルで「wp-load.php」を読み込みます。

<?php require_once('./wp/wp-load.php'); ?>

読み込むとWordPressの関数が使用できます。

下記コードを記述するとWordPressの最新記事を取得し、表示させることができます。

<?php $posts = get_posts("numberposts=5&category=&orderby=post_date&offset=0"); ?>
<?php global $post; ?>

<?php if ($posts): ?>
<ul>
<?php foreach($posts as $post): ?>
    <?php setup_postdata($post); ?>
    <li><a href="<?php the_permalink();?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

get_postsで記事情報を取得しています。

numberposts:件数
category:カテゴリーを指定
orderby:ソート順
offset:開始位置

上記の場合はカテゴリーを指定せず、最新記事5件を取得しています。

記事が存在する場合、取得したデータをループし「setup_postdata()」でポストデータをセットします。
そして「the_permalink()」と「the_title()」でパーマリンクと記事タイトルを表示しています。

記事が正しく出力されればOKです。


オフィシャルサイトのブログなどではディレクトリの中にWordPressが設置されているのをよく見ます。
最新情報が自動で反映されれば記事を投稿するたびに更新しなくて済むので運営も楽になると思います。