更新日 12/02
こんにちわ、名古屋の花屋・丸の内フローラです。
11月末よりワードプレスを使い始めました。
まだまだインストールしたばかりで、何も始まっていません。
そもそもホームページビルダーでのローカル側作成で16年作っていた私にとって
ワードプレスは無知の領域で、すべてググりながらゆっくりと進めています。
固定ページってなんだー?
諸先輩方の参考ページで勉強しながら、ワードプレス3日の私がとりあえず
ajaxzip3を動かせるようになるまでの備忘録です。
※参照にさせていただいたサイトです※
■ワードプレスの中にお問い合わせフォームを付けてみる。
まだ作成段階中ですが、プラグインでContact Form 7というものを見つけました。
そもそも3日前のインストールで、初日にプラグインを覚えました。
①Contact Form 7をインストール
②FFFTPにてワードプレス内の自分の使用しているテーマのフォルダをクリック
wp-content → themes → 自分の使っているフォルダ → functions.php
③functions.phpをFFFTPでダウンロードして、テキストエディタで開き
一番最後に
function add_head_link() {
echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
echo "
<script type=\"text/javascript\">
jQuery(function($){
$(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
})";
echo '</script>';
}
add_action('wp_head', 'add_head_link');
上記ソースを貼り付けました
※追記※ 外観 → テーマの編集 → functions.phpに追記・保存で良いみたい・・・
これも初心者なので仕方ありません。また勉強です。
④functions.phpをFFFTPで同じ場所にアップロード
⑤ワードプレスダッシュボード → 外観 →テーマの編集 → テーマヘッダー
<head></head>内に下記ソースを貼り付け
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
⑥ダッシュボード → お問い合わせ → Contact Form 7起動 新規フォーム追加
⑦下記ソースをフォームに貼り付け
<p>郵便番号<br />
[text zip 7/7 id:zip]</p>
<p>住所<br />
[text address 80/ id:address]</p>
⑧保存
携帯・PCなどで動作確認
以上。
初心者が次回以降の備忘録に書いて、自分自身がかろうじてわかる内容です。
が、いつか・・・私と同じくらい超初心者の方がこの日記で少しでも
救われたら本望です。
さて、試作は成功したのでclassやidなどをオリジナルに
変更させてフォームを完成させます。
お花屋さんのフォームはお届け日時から
注文主詳細・ご依頼主詳細・商品の選択・名札の内容など
記入項目が多いため、もしこのフォームを外注依頼されたら・・・
完成渡しまでワードプレスでも人工賃は2日分は欲しい。
とおもうと2日分は支払わないといけない金額。
トライアンドエラーを繰り返しとりあえずたどり着いた答えがでてほっとしています。
よっしゃ、次の課題が待っている。がんばるぞぅ!
名古屋の花屋・丸の内フローラ