久々のwordpressネタです。
このwordpressも本サイト(静的サイト)へブログの新着記事を読み込ませています。
今回は、wordpressの記事だけでなく、contactform7の埋め込みなどもまとめてみますね。
wordpressの記事やコードを埋め込むには?
まず、2つ方法があります。
1つ目は「RSS」を使う方法。2つ目は「wp-load.php」を使う方法。
どちらでも記事の埋め込みはできるのですが、私は同一ドメイン内でコードを埋め込む場合は、「wp-load.php」、完全に外部のwordpressの記事を読み込む時は「RSS」と考えています。
「wp-load.php」を使うとcontactform7なども埋め込むことができて便利なのですが、仕様上、同一ドメイン内のwordpressしか読込できないようです。
同一ドメインと言っても、振り分けているような場合は使えるかどうか分かりませんが…。
実際の埋め込み方法
埋め込む側のhtmlもしくはphpのDOCTYPE宣言の前に下記のコードを入れるだけです。
拡張子がhtmlの場合、phpのコードが使えるようにしておいてくださいね。
<?php require_once( dirname(dirname( __FILE__ )) . '/wp-load.php' ); ?>
このコードを入れておくだけで、wordpressの関数が別サイトでも使えるようになります。
特定のページのみwp-load.phpを読み込ませたい
phpで組んだページなどでヘッダーやフッターを共通化している場合などに便利です。
<?php $wpurl = $_SERVER['REQUEST_URI']; if($wpurl == "/"){ require_once('blog/wp-load.php'); }elseif($wpurl == "/main/contact.html"){ require_once('../blog/wp-load.php'); }else{ } ?>
if($wpurl == “/”)はルートディレクトリ(例:http://hoge.com/)だったらwp-load.phpを読み込むという意味です。その後に続くrequire_once(‘blog/wp-load.php’);のパスは、そのページから見た時のwp-load.phpのパスです。
その次の行のelseif($wpurl == “/main/contact.html”)はルートディレクトリ以外のページで指定したページ(例:http://hoge.com/main/contact.html)だったらwp-load.phpを読み込むという意味です。
最後のelse{はそれ以外のページはwp-load.phpは読み込まないという意味。
実際に検証したわけではありませんが、不必要なページにwp-load.phpを読み込ませると、サイトの表示速度が遅くなるという話を聞いたことがあります。
サイトのページ数が多く、またwp-load.phpを読み込ませるページが少ない場合などにはこちらのコードの方が便利です。
実際に投稿記事を読み込ませるコード
wordpressに慣れていない方はどんなコードを書いていいのか分からないと思うので、サンプルコードを上げておきます。
どちらもカスタム投稿タイプ「blog」の読込です。
1つ目のサンプルコードは単純に投稿日とタイトルの取得だけをしています。
<dl> <?php $args = array( 'numberposts' => 15, //表示する記事の数 'post_type' => 'blog' //投稿タイプ名 // 条件を追加する場合はここに追記 ); $customPosts = get_posts($args); if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?> <dt><?php the_time('Y年m月d日'); ?></dt> <dd><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></dd> <?php endforeach; ?> <?php else : //記事が無い場合 ?> <?php endif; wp_reset_postdata(); //クエリのリセット
echo '<img src="'.$thumbimg.'/images/sample.jpg">';
?>
</dl>
下記はアイキャッチ画像も読み込ませたい場合のサンプルコードです。
投稿日、タイトル、記事の本文(120文字)、アイキャッチ画像を取得しています。
アイキャッチの登録がない場合の代替画像を表示するコードは$thumbimg = content_url();としていますが、これは通常のメディア登録している画像を指定する場合になります。
テーマのimagesフォルダ内の画像を読み込ませたい場合は$thumbimg = get_stylesheet_directory_uri();に変更してください。
その後に続く
echo '<img src="'.$thumbimg.'/uploads/sample.jpg">';
は
echo '<img src="'.$thumbimg.'/images/sample.jpg">';
という感じにすれば問題ありません。
※読み込ませるパスや画像名は適宜変更してくださいね。
<dl> <?php $args = array( 'numberposts' => 15, //表示する記事の数 'post_type' => 'blog' //投稿タイプ名 // 条件を追加する場合はここに追記 ); $customPosts = get_posts($args); if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?> <dt><?php if (has_post_thumbnail() ) { //アイキャッチがあれば img タグの画像を返す。 echo get_the_post_thumbnail($post->ID, 'full'); } else { //アイキャッチがない場合は代替画像を表示。 $thumbimg = content_url(); echo '<img src="'.$thumbimg.'/uploads/sample.jpg">'; } ?> </dt> <dd><span><?php the_time('Y年m月d日'); ?></span><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a><br /><?php echo mb_substr(get_the_excerpt(), 0, 120); ?>…</dd> <?php endforeach; ?> <?php else : //記事が無い場合 ?> <?php endif; wp_reset_postdata(); //クエリのリセット ?> </dl>
別サイトでwordpressのcontactform7を使う
wp-load.phpの読込ができていれば、contactform7も静的サイトで使うことができます。
ちなみに先にcontactform7の設定はしておいてください。
<?php echo do_shortcode( 'エラー: コンタクトフォームが見つかりません。
' ); ?>
たった1行でお問い合わせフォームの設置も完了してしまいます!
ブログ等でwordpressと並行して利用する場合などはわざわざフォームを設置する必要がないので、便利ですし、カスタマイズもcontactform7側で行うだけなんで、とっても簡単。
エラー: コンタクトフォームが見つかりません。
の部分は設定したcontactform7のショートコードを張り付けしてください。
他の読込は?
投稿記事とcontactform7の読込以外は実装したことがないのですが、contactform7の読込にはショートコードを使用しています。
なので、他にもショートコードでの貼り付けが可能なものなら、埋め込みが可能ではないかと思っています。