WordPressでルートフォルダにindex.htmlとindex.phpがあるとき

WordPressでリニューアルの時など、一時的にルートのフォルダにindex.htmlとindex.phpの両方を置くことってありますよね。
リダイレクトがかかってindex.htmlが表示されてしまい、Wordpressのトップページが表示されなくて困る。。そんな時には、wp-includes/canonical.phpの304行目をコメントアウトしてみてください。(ver 3.3.1)
これで、index.htmlとindex.phpどちらも表示出来るようになります。

	// trailing /index.php
	   $redirect['path'] = preg_replace('|/index.php/*?$|', '/', $redirect['path']);

http://example.com/の時は、http://example.com/index.htmlが表示され、http://example.com/index.phpの時は、index.php(WordPress)が表示されるようになります。

WordPressの投稿時にサムネイルを表示させる方法ーアイキャッチ画像

WordPress2.9以降、1つの投稿につき1つの画像を紐付けする「アイキャッチ画像」機能が追加されました。
このアイキャッチ画像は、サムネイル、中サイズ、大サイズ、フルサイズとサイズ指定ができて、一度の指定でリサイズしたそれぞれの画像を保存してくれます。

アイキャッチ画像機能を有効にするには

アイキャッチ画像の機能を有効にするには、functions.phpに以下を書き加えてください。

// アイキャッチ画像を表示
 add_theme_support('post-thumbnails');

これで、ダッシュボードの投稿ページにアイキャッチ画像の機能が表示されます。
さらに、サイズ指定をしてみましょう。

例えばこんな感じ。

// 基本サイズ
set_post_thumbnail_size(200, 200);
// Mサイズ
add_image_size('msize', 165, 128, true);
// Sサイズ
add_image_size('ssize', 80, 80, true);

4つ目のパラメータはトリミングするかどうかの設定で、「true」or「false(省略可)」を指定します。
「true」の場合、画像はトリミングされます。
「fales」の場合、長辺に合わせて、登録画像と同比で縮小されます。

アイキャッチ画像を表示するには

アイキャッチ画像を表示するには、テンプレートにアイキャッチ画像を読み込むテンプレートタグを記述します。

// 基本サイズを表示
<?php the_post_thumbnail(); ?>
// Mサイズを表示
<?php the_post_thumbnail('msize'); ?>
// Sサイズを表示
<?php the_post_thumbnail('ssize'); ?>

これで、思い通りのサイズの画像を表示することが可能になります。

WordPress テーマの作成手順

まだ書きかけの記事です。。

WordPressをインストールすると、デザインを変更出来るようにたくさんのテーマが用意されています。
そして、このテーマは自分でも作ることができるんです。
オリジナルテーマを作成することで、思い通りのサイト構成にすることができるようになります。
HTMLやCSSの知識は必要ですが、PHPはそんなに詳しくなくても大丈夫なので、やってみましょう!

オリジナルテーマ作成手順

  1. トップページやセカンドページなどを、静的htmlで作成
  2. オリジナルテーマ用のフォルダを用意する
  3. WordPressのテンプレートタグを当てはめていく
  4. ヘッダーなどをパーツとして取り込む
  5. アップロードする

トップページや、セカンドページなどを、静的htmlで作成

まず最初に、いつもの感じでトップページとセカンドページを静的HTMLとCSSでコーディングしてしまいましょう。
セカンドページは記事詳細ページと固定ページのテンプレートに使うイメージです。

オリジナルテーマ用のフォルダを用意する

既存のテーマフォルダを見ていただくと、たくさんのファイルやフォルダが入っています。
オリジナルテーマも同様に、わかりやすいテーマ名をつけたフォルダを用意し、その中に先に作っておいた
* style.css
* index.html
など、必要なファイルを保存し、デザインのキャプチャを
* screenshot.png
というファイル名で保存しておきます。
これで、ダッシュボードでもスクリーンショットが表示されます。(もちろん、アップロード後です。)

WordPressのテンプレートタグを当てはめていく

index.phpの作り方

index.htmlの必要箇所にテンプレートタグを当てはめていきます。

例えば、テーマフォルダ内のimagesフォルダにある画像を表示させる場合には、下記のようにテンプレートタグを入れてあげる必要があります。

//このままでは画像が表示されません
<img src="images/image.gif" alt="" width="100" height="10" />
// 下記のように変更
<img src="<?php bloginfo('template_url'); ?>/images/image.gif" alt="" width="100" height="10" />

// テンプレートディレクトリの URL を挿入するテンプレートタグ
<?php bloginfo('template_directory'); ?>

// 現在のテーマのスタイルシートが入っているディレクトリの URL を返すテンプレートタグ
<?php bloginfo('stylesheet_directory'); ?>

必要箇所を変更したら、ファイルをPHP形式で保存します。

style.cssの作り方

CSSの一番上に、必ずコメント形式で「テーマの詳細」を記述してください。
これが無いと、テーマとして認識されないようです。

/*
Theme Name: Rose
Theme URI: テーマのホームサイトの URI
Description: a-brief-description
Author: 作者の名前
Author URI: 作者の URI
Template: 親テーマの定義 (オプション)
Version: バージョン番号 (オプション)
コメント/利用許諾の記述 (あれば)
*/

ヘッダーなどをパーツとして取り込む

全ページで共通している部分はパーツテンプレートとして作っておき、それをテンプレートファイル(index.phpやsingle.phpなど)にインクルードタグを使って取り込みます。
変更があった時などに1つのファイルを変更するだけで済むので、管理しやすいというメリットがあります。
インクルードタグ– WordPress Codex 日本語版
関数リファレンス– WordPress Codex 日本語版

パーツ パーツテンプレート インクルードタグ
ヘッダー header.php <?php get_header(); ?>
フッター footer.php <?php get_footer(); ?>
サイドバー sidebar.php <?php get_sidebar(); ?>
カスタム aaa.php <?php get_template_part(‘aaa’); ?>

アップロードする

アップロードするテーマ用のフォルダ内にある必要なくなったHTMLファイルを削除し、wp-content/themes/ にアップロードします。「サイト管理者>テーマ」にアップロードしたテンプレートが表示されているので、「ネットワーク有効化」すると、それぞれのサイトで、選べるようになります。

WordPressのテンプレートタグ

テンプレートタグは、テンプレート内で使用するデータを取得する呪文みたいなもの(かな?)。
この呪文を唱えれば、データベースから必要なデータを呼び出してくれます。

テンプレートタグ – WordPress Codex 日本語版

一番基本的なループするときの呪文

該当する記事がある限り、くり返し表示してくれます。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
    <div class="post">
    ここに呼び出してくるデータが入ります。
    </div>
<?php endwhile; endif; ?>

該当する記事がない場合は、このように表示させることも出来ます。

<?php if(have_posts()):while(have_posts()):the_post(); ?>
    <div class="post">
    ここに呼び出してくるデータが入ります。
    </div>
<?php endwhile;else: ?>
    <div>
    記事が見つかりません。
    </div>
<?php endif; ?>

条件にあった記事だけを表示させたい場合

さらに、「query_posts」にパラメータを指定してあげれば、条件にあった記事だけを表示させることも出来ます!
複数のパラメータを指定するときは「&」で区切って指定してください。

// カテゴリー「cat」の記事だけを5件、ランダムに表示する場合。
<?php query_posts('category_name=cat&posts_per_page=5&orderby=rand'); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
    <div class="post">
    ここに呼び出してくるデータが入ります。
    </div>
<?php endwhile; endif; ?>

注意点!!「query_posts」はそこから後のループ全てに影響するので、
リセットしたい場合は、パラメータに「$query_string」を指定するといいようです。

// カテゴリー「cat」の記事だけを5件、ランダムに表示する場合。
<?php query_posts('category_name=cat&posts_per_page=5&orderby=rand'); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
    <div class="post">
    ここに呼び出してくるデータが入ります。
    </div>
<?php endwhile; endif; ?>

// リセット
<?php query_posts($query_string); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
    <div class="post">
    ここに呼び出してくるデータが入ります。
    </div>
<?php endwhile; endif; ?>

WordPressのURLをスッキリさせる~親サイトの「/blog/」編

WordPressで複数のサイトを管理するときには便利なマルチサイトの設定ですが、
親サイトのパーマリンクに自動的にくっついてくる「/blog/」の表示。
URLをコントロールしたい場合にはとても困ってしまいますが、表示させなくする方法がありました。

1.まずは、「サイト管理>設定>パーマリンク設定」でパーマリンクをデフォルトにして保存。

親サイトの編集

2.「サイトネットワーク管理者>サイト>編集>設定」→「Permalink Structure」の「/blog/」を消して、「/%category%/%postname%.html」などの任意のパーマリンクに変更して、保存。

「%postname%.html」など、「.html」で終わるように設定すれば、パーマリンクが「html」になります。

親サイトの設定画面

これで、URLがスッキリしました!

「WPマルチサイト化-親サイトパーマリンク頭の「blog」を消す」を参考にさせていただきました!!

WordPressのURLをスッキリさせる~最後に「/(スラッシュ)」をつける編

これまでのWordPressのパーマリンクの設定で、「/blog/」も「/category/」も表示されなくなったし、投稿記事の最後は「.html」で終わるようになった!!。。でも、カテゴリや、固定ページのURLの最後に「/(スラッシュ)」が付いてなくて、「何だか気持ち悪い~」という人も多いのでは?

そんな時に使えるプラグインが「Nice Trailingslashit」。

インストールするだけで、URLの最後に「/(スラッシュ)」をつけてくれます。

http://○○.com/company

↓ ↓ ↓

http://○○.com/company/

こんな感じです!
「パーマリンクのURLの末尾に/(スラッシュ)をつけるプラグイン Nice Trailingslashit」を参考にさせていただきました。

WordPressのURLをスッキリさせる~「/category/」編

WordPressでパーマリンクにカテゴリ名を設定することって、多いですよね。
でも、デフォルトでは「/category/カテゴリ名/」って感じで自動的に入る「/category/」。。これは、前回の「/blog/」同様、URLをスッキリさせたい時には「要らない!!」ですね。

これを解決してくれるプラグインが「Top Level Categories」です。

「サイトネットワーク管理者>プラグイン>新規追加」で検索窓に「Top Level Categories」で探してください。

「今すぐインストール」をクリックすれば、簡単にインストールできます。

これで、「/category/」は表示されなくなります。

WordPressで新しいサイトを追加する方法

WordPressのマルチサイトの設定をしたところで、早速新しいサイトを追加してみます。

「ネットワーク管理者>サイト>新規追加」で、「サイトのアドレス」「サイトのタイトル」「管理メールアドレス」を入力して追加します。次の画面で、新しいサイトが追加されたことが確認できます。

新しいサイトの追加画面

WordPressのおすすめプラグイン

WordPressをインストールした時に、使用しているプラグイン。痒いところに手が届く、超便利なお助けプラグインたちです。

■インストールすると、デフォルトで入ってるこの2つ!
1.Akismet
スパム対策プラグインです。

2.WP Multibyte Patch
日本語版WordPressで、日本語の処理に対応してくれるプラグインです。

■使って便利なプラグイン
3.inquiry-form-creator
管理画面つきのお問い合わせフォーム。
Contact Form 7も良いけど、管理画面で管理出来るのはとっても便利。Google Analyticsでコンバージョンを設定するための仮想URLを設定できたり、データをCSVでダウンロードできたりも。

4.Top Level Categories
パーマリンクの設定で「/%category%/」にすると、URLに自動的に入ってしまうcategoryを非表示にしてくれるので、スッキリしたURLになります。

5.Nice Trailingslashit
URLの最後は「/(スラッシュ)」で終わらせたい時のプラグイン。
上記の Top Level Categoriesと、サイトの編集から行えるパーマリンク設定のセットで、フォルダ構造を思い通りにできる必需品。

6.Breadcrumb NavXT
パンくずリストを自動的に作成してくれるプラグイン。 詳細設定できて、本当に便利。

7.Google XML Sitemaps with Multisite support
XMLサイトマップを自動生成してくれるプラグインのマルチサイト対応版です。SEO対策に有効ですね!

8.All in One SEO Pack
SEO対策プラグイン。 

■モバイルサイト用プラグイン
9.Ktai Style
携帯サイトにしてくれるプラグイン。

10.WPtouch
インストールするだけで、iPhoneでも見れる!!スマトーフォン対応に変換してくれるプラグイン。有料版もあって、こちらはさらに便利そう。

WordPress マルチサイトにするためのインストール

WordPress3から、1つのWordpressで複数のサイトを管理するマルチサイト機能が使えるようになりました。後からは追加できない機能なので、複数のサイトを作る可能性があるときは先にマルチサイト機能もインストールしておきましょう。

1.Wordpressをインストール
Wordpressをダウンロード、インストールまでは普通の手順(WordPress のインストール – WordPress Codex 日本語版)で行います。
そのときに注意点が1つ。。
マルチサイト化するには、Wordpressをルートの直下にインストールしましょう。そうじゃないと、正しく機能しないようです。

2.マルチサイトの機能を有効に
マルチサイトの機能を有効にするためには、wp-config.phpの「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」の前に、define(‘WP_ALLOW_MULTISITE’, true);と書き加えてアップロードしておきます。

■wp-config.php

define('WP_DEBUG', false);

/* マルチサイト 追加 */
define('WP_ALLOW_MULTISITE', true);
/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */

3.ネットワークの設定
Wordpressにログインして、「ツール>ネットワーク」で「ネットワークを作成」画面が表示されます。ここで、基本的な設定をします。

ネットワーク内のサイトアドレスで、サブドメインとサブディレクトリどちらかを選択します。
(サイトアドレスは後から変更できないので、注意してください。)

「ネットワークのタイトル」と、「管理者のメールアドレス」を入力したら、「インストール」をクリックします。

「ネットワークを構築中」の画面が表示されますので、指示に従って「blogs.dir」を作成し、wp-config.phpと.htaccessにコードを追加してください。

「ログイン」をクリックするともう一度ログイン画面が表示されるので、ログインしなおします。

「ダッシュボード」の右上のプルダウンメニューに「サイトネットワーク管理者」が表示されていれば、インストール完了!です。

マルチサイト設定後

4.ネットワークに関する設定
最後にネットワークに関する設定をしておきましょう。

「サイトネットワーク管理者」の「設定」から、ネットワークのオプションの設定をします。
マルチサイト化すると、画像のアップロードが無効になってしまうので、下記のようにメディア3つともチェックを入れておきます。これで、投稿画面のアップロード/挿入の右側に、それぞれのアイコンも表示されるようになりました。
さらに、その下の言語設定も「Japanese」 にしておきましょう。

ネットワークのオプション画面

■記事投稿画面の「アップロード/挿入」アイコン
記事投稿画面アップロードアイコン