WordPress Tips

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

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

今月キャンペーン特典があるサービス

  • ConoHa WING
    WINGパック36ヶ月で月額652円 55%OFF - 2023年3月31日(金)16:00まで
  • エックスサーバー
    月額費用が最大30%オフの693円&ドメイン永久無料、さらに移転代行も0円中 - 2023年4月21日(金)12:00まで
  • Xserverビジネス
    12ヶ月以上契約で初期費用無料、3ヶ月・6ヶ月で初期費用半額 - 2023年4月4日(火)12:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WordPress Tips
-