• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）

【このWikiはいつでも誰でも編集できます】

WordPressと既存サイトの統合

提供: WordPress Codex 日本語版
移動先: 案内、 検索

はじめに

WordPress は非常にパワフルなソフトウエアで複雑な構成もシンプルな構成も可能です。既存の Web サイトに対してどのくらい WordPress を使用するかは完全にあなた次第です。WordPress の便利ないくつかの機能だけを使用してサイトと統合することもできますし、サイト全体を WordPress で稼働することもできます。このチュートリアルでは WordPress を変更して既存のサイトのデザインに合わせていきます。まず WordPress ブログをサイトの他のページのデザインと同じになるように変更します。続いてサイト全体を WordPress 上で動作させます。

なおここでの手順は マルチサイトネットワークでは動作しませんので注意してください。


移行の開始

まず既存のサイトが http://myexample.com にあると仮定します。サイトに新規のサブディレクトリ(フォルダー)「blog」を作成します。名前は「blog」以外でも構いませんが、サブディレクトリを作成する必要があります。これで空のサブディレクトリ http://myexample.com/blog/ が準備できました。WordPress をダウンロードし、この新しいフォルダーにすべてのファイルをアップロードします。そして WordPress をインストールします。


ヘッダーの取り込み

通常の PHP ページを変更して WordPress を活用するには、各ページの先頭に次のどちらかのコードスニペットを追加する必要があります。 

<?php 
/* 簡潔に */
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
?>

<?php
require('(ファイルへのパス)/wp-blog-header.php');
?>

ループ

多数公開されているテンプレートタグ や プラグイン を効果的に利用するには、ページに「ループ」を含める必要があります。既存の Web サイトと WordPress のパワーを統合する前に「ループ」と「ループの働き」を参照して理解を深めてください。

例

リストの生成

Web ページにアルファベット順に 10件の投稿を昇順で表示する場合、次のコードを利用して投稿日、タイトル、抜粋を一覧にできます。 

<?php
require('(ファイルへのパス)/wp-blog-header.php');
?>

<?php
$posts = get_posts('numberposts=10&order=ASC&orderby=post_title');
foreach ($posts as $post) : setup_postdata( $post ); ?>
<?php the_date(); echo "<br />"; ?>
<?php the_title(); ?>    
<?php the_excerpt(); ?> 
<?php
endforeach;
?>

最新の3件の投稿

Web ページに最新の3件の投稿のタイトルをリンク付きで表示します。 

<?php
// 最新の3件の投稿を取得
global $post;
$args = array( 'posts_per_page' => 3 );
$myposts = get_posts( $args );

foreach( $myposts as $post ) :	setup_postdata($post); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a><br />
<?php endforeach; ?>

テーマの作成

このチュートリアルの前半では既存の Web サイトにどのように WordPress のコンポーネントを統合するかについて説明してきましたが、そろそろこの方式をやめて、WordPress テーマを作成し、サイトのページ全体を置き換えたいと思っている頃でしょう。

それにはカスタマイズしたテーマを作成する必要があります。テーマは WordPress にサイトの表示方法を伝える一連のファイルで、「テーマの使い方」は WordPress の基本です。テーマはゼロから作成することもできますが、最初は既存のテーマを拡張する「子テーマ」の作成から始めたほうが良いでしょう。子テーマは既存のテーマの一部をカスタマイズすることができます。詳細については「子テーマ」を参照してください。

移行の際は、マイナーですが非常に有用な HTML 要素 <base> が活躍します。この要素はブラウザに指定した URL を相対パスとして使用するよう指示します。 

 <base href="http://myexample.com" />

通常 <base> は現在の URL になります。たとえばデフォルトの <base> は http://myexample.com/blog/ です。<base> 要素を指定することでブラウザに http://myexample.com/ でファイルを探すよう変更できます。なぜこれが有用なのでしょうか? 現行サイトからコピーペーストしてくる HTML に次のようなコードがあるとします。 

 <img src="me.jpg" alt="" />

この HTML をテーマにコピーすると、実際には http://myexample.com/me.jpg にファイルがあるにも関わらずブラウザは http://myexample.com/blogs/me.jpg として探します。<base href="http://myexample.com" /> を使用することでブラウザに正しい場所でファイルを探すよう指示できます。また既存のサイトからコピーしたすべてのファイルのすべての参照を逐一編集する手間も省けます。


パフォーマンス

WordPress は素早く動作しますが、ページ表示のたびに毎回、かなりの量のコードのロードが必要です。ホスティング環境によってパフォーマンスに影響を与える場合も与えない場合もありますが、SuPhp を使用した共有ホスティング環境であれば (すなわちオペコードのキャッシュのない環境では)、ページのロードごとに数秒かかります。


外部リンク


最新英語版： WordPress Codex » Integrating WordPress with Your Website （最新版との差分）

「http://wpdocs.osdn.jp/wiki/index.php?title=WordPressと既存サイトの統合&oldid=11991」から取得