WordPress Tips

Contact Form 7をWordPress以外の静的ページで使う

2018-12-05

本記事にはプロモーションが含まれています。

Contact Form 7をWordPress以外の静的ページで使う

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

WordPressと静的HTMLが共存しているサイトなどで静的ページでWordPressのプラグインContact Form 7を使いたい時に
静的HTMLにContact Form 7を埋め込みたい場合はphpをhtmlとして動かすための設定も必要

wp-load.phpをインクルードする

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

wp-load.phpはwordpressのテンプレートタグを外部で使うためのphp。wpはwordpressをインストールしているディレクトリ。必要に応じて変更する。doctype宣言よりも前に記述する。

wp_head()とwp_footer()を配置する

<head></head>内にwp_headを記述

<?php wp_head(); ?>

footer部分、</body>の直前にwp_footerを記述

<?php wp_footer(); ?>

Contact Form 7のショートコードを配置する

フォームを表示したい場所にContact Form 7のショートコードを記述する

<?php echo do_shortcode( '[contact-form-7 id="XXX" title="問い合わせフォーム"]' ); ?>

以上でContact Form 7で作ったフォームを使えることができると思います。
がwp_head,wp_footerでwordpressのテーマやプラグインのcss,javascriptなども一緒に読み込んでしまいます。
静的ページとwordpressのデザインが異なっている場合はレイアウトやスタイルが変わってしまう可能性もあり。また、不要なファイルを読み込むとページ表示スピードにも関わるので必要ないファイルは読み込ませないようにすることも必要ですね。

wp_headの内容を整理するには

remove_actionで不要なタグを表示しないように

remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'wp_shortlink_wp_head' );
remove_action( 'wp_head', 'rest_output_link_wp_head' );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
remove_action( 'wp_head', 'wp_oembed_add_host_js' );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

wordpressのプラグインが読み込むスタイルシートや不要なタグを削除するには

wp_deregister_script、wp_dequeue_scriptで。
wordpressのテーマディレクトリのfunctions.phpに記述します。

//自動で出力されるtitleタグを削除
remove_action('wp_head', '_wp_render_title_tag', 1);
//wp_headでjQueryを読み込まない他、不要なスクリプト、CSS削除
function my_delete_head() {
   //wordpressで読み込んだfont awesomeのスタイルシート削除
    wp_dequeue_style('font-awesome-style');
}
add_action( 'wp_enqueue_scripts', 'my_delete_head' );
  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WordPress Tips
-