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

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' );