[KBoardスキンダウンロード]見積もりリクエスト - Bootstrapスキン

WordPress 掲示板プラグインKBoardのAvatarスキンを見積もりフォームに改造したバージョンです。 [Bootstrapスキン](ファイル名: requestform_bootstrap_modified7.zip)

2017年1月29日アップデート: ここにあげた資料は、1年以上過ぎてもはや新しいバージョンと互換性がないとします。 希望の方は ここからダウンロードして修正して使用することができますが、他の方法を講じて見ればいいようです。

  • 直接 KBoard スキンの変更
  • KBoardで提供されるCotact Formスキン利用。 最近 KBoardが更新されContact Formスキンが追加されました。 それを活用してみてもいいようです。
  • Contact Form 7やQuformでお問い合わせを受けて、提出されたお問い合わせを KBoard経由で出力します。 この方法ではコーディング操作が必要です。 開発者は簡単に可能ですが、一般の人は簡単ではないようです。 詳しくは「Contact Form 7で提出したお文をKboardに自動投稿する「または」Quformで提出した文章を KBoard スレッドに登録する"文を参照してください。

ご不便をお掛けします。


Kboard Quote Request Form Bootstrap skin

もっと詳しく ここを参照してください。

インストール方法:

  1. 上記のファイルをダウンロードします。
  2. Avatarスキンを使用して、新しいスキンを作成します。 スキンを作成する方法は、 ここを参照してください。
  3. ダウンロードしたファイルを解凍して、新しく作成されたスキンフォルダにアップロードします。
  4. 以外のプロセスは、一般的なKBoardスキンを使用と同じです。
  5. 入力フィールド内のアイコンが正しく表示されるようにするAwesomeフォントをインストールする必要があります。 (ここ 参考)
  6. この画像ファイルをダウンロードして、メディアにアップロードして、style.cssで次のXNUMXつの行の画像ファイルのパスを変更します。
    background: #FFF url('https://www.thewordcracker.com/wp-content/uploads/2015/06/down-arrow.png') no-repeat right!important;
    background: #FFF url('https://www.thewordcracker.com/wp-content/uploads/2015/06/down-arrow.png')

日付セレクタを使用するには、次のコードをコピーしてjsファイル(たとえばdatepicker.js)にし、テーマフォルダの下にjsフォルダを作成してコピーします(例:wp-content /themes/テーマフォルダ名/js)。

$(document).ready(function () {
var select = function () {
var d1 = $('#datepicker3').datepicker('getDate');
var d2 = $('#datepicker4').datepicker('getDate');
var diff = 0;
if (d1 && d2) {
diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}
$('#calculated').val(diff);
}
$("#datepicker3").datepicker({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
showMonthAfterYear: true,

numberOfMonths: 1,
minDate: 0,
onSelect: function (selected) {
$("#datepicker4").datepicker("option", "minDate", selected);
select();
}
});
$("#datepicker4").datepicker({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
showMonthAfterYear: true,
numberOfMonths: 1,
onSelect: function (selected) {//you have a syntax issue here the select method has to be called inside the default handler
$("#datepicker3").datepicker("option", "maxDate", selected)
select();
}
});
});

 (*重要:上記のコードでエラーが出る場合$をjQueryを使って一括変更した後にテストしてみてください。)

そしてテーマファイルでjsファイルをフック(enqueue)させます。 詳細については、 WordPress Codexページを参照してください。

jsフックサンプル:

function iconicchild_scripts() {
wp_enqueue_script( 'wpb_loadmore', get_stylesheet_directory_uri() . '/js/datepicker.js', array('jquery'), '20150435', true );
}
add_action( 'wp_enqueue_scripts', 'iconicchild_scripts' );

テーマに沿ってレイアウトが違って表示されることがあります。 CSSを使用してレイアウト調整が必要な場合があります。

 

*注意:十分なテストを経ていない。 もしかしたら、エラーがあるかの改善点があれば教えてください。

 

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

9のコメント

  1. 私もずっとdatepickerフックで苦労します。〓〓。wpb_loadmoreが何であるか分からないヨブ!
    もしかしたら、ちょっとお知らせ間違いございましでしょう?
    $ handle:スクリプトの名前の意味をよく理解してことができずおり、ヨブ

    1. こんにちは?

      おそらく初心者がついてするには難しいます。
      方法は次のとおりです。
      1)テーマフォルダの下にjsフォルダを作成しdatepicker.jsファイルを作成した後、上記のjQueryスクリプトをコピーして挿入します。 スクリプトの先頭にvar $ = jQuery; した行を追加していただければ$をjQueryを使って変更しなくてもされます。
      2)enququeコード(jsフックサンプル)をコピーして、テーマ関数ファイル(functions.php)の一番下に追加します。

      もっと詳しく https://www.thewordcracker.com/intermediate/how-to-load-js-files-in-wordpress/ 文を参照してみてください。

      1. アッ!迅速な回答超え〜超えありがとうございます! ところで.. ;;はい、上記の順番にスクリプトコードをコピーしてdatepicker.jsを作成enququeコード(jsフックサンプル)を、それでも関数フ​​ァイルに追加したヨブ;; ,,プロジェクト日付の登録部分が他の変化がないねヨブ。 。ㅠ;; もしdatepickerが正しく動作されている様子は、カレンダーが出るの合ったんですか?

      2. 正しく適用されると、(他のjsと衝突がなければ)、日付ピッカーが正常に動作しています。
        日付ピッカーのソースは公開されているものを使用しました。
        http://zetawiki.com/wiki/JQuery_UI_%EB%82%A0%EC%A7%9C%EC%84%A0%ED%83%9D%EA%B8%B0_datepicker
        現在、このブログでケイしなやか使用していないため、正しく確認することができないのですが、うまくできないましたら、ヘッダーに


        上記のようなコードを追加した後、テストしてみてください?

  2. 初心者が従うのは簡単ではありませんね。 Avada テーマでは、childテーマに/ jsフォルダ作成された後にdatepicker.js入れ次いでフックがありません。 例も一つ教えてください。

    1. こんにちは?

      内容を修正しました。 上記の内容を再度ご確認ください。
      一度テストして見てもされている教えいただけますか?

      だから、楽しい一日になってください。

  3. jQueryのコードがうまく動作しない場合enqueueが正しいことを確認し、ソースから$記号をjQueryを使って変更してみてください。 (WordPressでは$の代わりにjQueryを使用します。)

コメントを残す

*メールアドレスは公開されません。