• 解決済 ari.endo

    (@ariendo)


    お世話になります。

    テンプレートを開発すれば問題ないのでしょうが、能力と時間がないため、
    乱暴かとは思いますが、テンプレートのindex.phpを改造(一番下を参照)
    して、周囲のデザインだけ変えようとしています。

    フォームとしての動作には、問題がないのですが、スタイルが無効になるようで、
    送信中のajax-loader.gifが表示されず、下のメッセージの緑枠が消えてしまいます。
    「あなたのメッセージは送信されました。ありがとうございました。」

    http://contactform7.com/ja/2009/11/22/loading-javascript-and-stylesheet-only-when-it-is-necessary-2/
    を参考に、ページを以下のようにしたのですが、ダメでした。

    <?php
    if ( function_exists( ‘wpcf7_enqueue_scripts’ ) ) {
    wpcf7_enqueue_scripts();
    wpcf7_enqueue_styles();
    }
    ?>
    [contact-form 1 "コンタクトフォーム 1"]

    何か、ヒントでもご教示いただければ幸いです。

    よろしくお願いいたします。

    改造した、index.phpは以下の通りです。
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”js/rollover.js”></script>
    <link rel=”stylesheet” href=”landing.css” type=”text/css” />
    </head>
    <body>
    <div id=”wrapper”>
    <div id=”head” class=”clearfix”>
    <!–head–></div>
    <div id=”contents”>

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
    <?php if ( is_front_page() ) { ?>
    <h2 class=”entry-title”><?php the_title(); ?></h2>
    <?php } else { ?>
    <h1 class=”entry-title”><?php the_title(); ?></h1>
    <?php } ?>
    <div class=”entry-content”>
    <?php the_content(); ?>
    <?php wp_link_pages( array( ‘before’ => ‘<div class=”page-link”>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ‘</div>’ ) ); ?>
    <?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
    </div><!– .entry-content –>
    </div><!– #post-## –>
    <?php comments_template( ”, true ); ?>
    <?php endwhile; ?>

    <div id=”footer”></div>
    <!–contents–> /div>
    <!–wrapper–></div>
    </body>
    </html>

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    何のプラグインの話か他の方にはわかりにくいので、今後はタグだけではなくタイトルにもプラグイン名を入れるなどわかりやすくしてください。

    最終的に何をどうされたいのか、意図がよく理解できないのですが、詳しく説明していただけますか?

    トピック投稿者 ari.endo

    (@ariendo)

    つい、あわてていて、配慮が足らず、すみませんでした。
    Contact Form 7 プラグインについての質問です。
    バージョンは、WordPress 3.0.1、MySQL 5.0.85、PHP 5.2.11 です。
    テーマは、既定のTwenty Ten 1.1 を使っています。

    Contact Form 7 プラグインを使って、問い合わせフォームを作れば、
    当然、Twenty Ten のデザイン上に、入力項目一覧が配置されますが、
    枠を独自のデザインに変えたいのです。

    そのために、Twenty Ten テーマの編集で、ページテンプレート
    (page.php)を上記のように変更して保存しました。
    (index.phpではなく、page.phpでした。すみません。)

    その結果、「送信」ボタンを押した後に、その右に表示される
    作業中のアイコン(2つの矢印がぐるぐる回るもの)が表示されなくなり、
    送信完了のメッセージは表示され、送信もされるのですが、
    送信完了メッセージの周りの緑色の枠が表示されなくなった、ということです。

    枠を独自のデザインに変えたまま、作業中のアイコンと、
    送信完了メッセージの周りの緑色の枠とを復活させるには、
    どうすればいいか、アドバイスをお願いします。

    ちなみに、実際のコンタクトフォームは、以下のようになっています。
    よろしくお願いいたします。

    <style type=”text/css”>
    <!–
    .list-block .wpcf7-list-item { display: block; }
    .list-inline .wpcf7-list-item { display: inline; }
    .red{color:#ff0000;}
    –>
    </style>
    <table id=”contact”><tr><th style=”white-space:nowrap; vertical-align:top;”>
    <span class=”red”>*</span>御社名
    </th><td>
    [text* company]
    </td></tr><tr><th style=”white-space:nowrap; vertical-align:top;”>
    <span class=”red”>*</span>ご担当者氏名
    </th><td>
    [text* name-kanji]
    </td></tr><tr><th style=”white-space:nowrap; vertical-align:top;”>
    <span class=”red”>*</span>E-mailアドレス
    </th><td>
    [email* your-email](半角英数字)
    </td></tr></table>
    <table id=”contact”><tr><th style=”white-space:nowrap; vertical-align:top;”>
    <span class=”red”>*</span>今後、弊社の案内を希望しますか?
    </th><td>
    [radio promo class:list-inline default:2 “はい” “いいえ”]
    </td></tr></table>
    <table id=”contact”><tr><th style=”white-space:nowrap; vertical-align:top;”>
    <span class=”red”>*</span>どこで弊社を知りましたか?
    </th><td>
    [radio source class:list-block “新聞” “TV” “Google検索” “Yahoo検索” “その他”]
    </td></tr></table>
    <p>[submit “送信”]</p>

    トピック投稿者 ari.endo

    (@ariendo)

    追加情報です。

    テーマをいじる前の問い合わせフォームをFirebugで見てみると、
    以下のようなJavaScriptが見えているのですが、
    いじった後は、見えなくなります。この辺に問題がありそうです。

    /wp-content/plugins/contact-form-7/jquery.form.js?ver=2.47
    /wp-content/plugins/contact-form-7/scripts.js?ver=2.4.1
    /wp-includes/js/thickbox/thickbox.js?ver=3.1-20100407

    引き続き、調べてみます。
    取り急ぎ、中間報告まで。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    Twenty Ten テーマなら header.php 内で wp_head() が、footer.php 内で wp_footer() が、それぞれ実行されます。これらの関数により必要なスタイルシートやスクリプトが読み込まれます。読み込まれていないならそれらが実行されてない可能性が高いことになります。page.php に get_header() と get_footer() はありますか? 元々の Twenty Ten の page.php とよく見比べてみてください。

    あと、これは問題には直接関係ないでしょうが <table id="contact"> が複数あるようです。HTML の構造が間違っているために JavaScript の正常動作が妨げられるケースもあるので HTML バリデータを使ってチェックした方がいいです。

    トピック投稿者 ari.endo

    (@ariendo)

    ありがとうございます。
    こちらでも調べた結果、同様の結論に達しました。

    get_header()とget_footer()はありますが、
    header.php 内の <?php wp_head(); ?> と
    footer.php 内の <?php wp_footer(); ?> とを
    削除してしまっていました。

    これらを復活させることにより、思い通り、
    送信確認とエラー表示のスタイルが復活しました。

    HTMLバリデータのチェックもしてみます。

    これにて、解決といたします。
    ご丁寧にありがとうございました。

    遠藤存

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「送信中と送信後のスタイルが無効にならないようにするには?」には新たに返信することはできません。