WordPressのチュートリアル:推薦のプラグインを作成する方法

  • WordPress
  • 更新:Aug 12、2013

ここでは、WordPressに関する第2回目のチュートリアルです。 私たちは、 無限スクロールWPサイトページフリッププラグイン 過去には。 今日はカスタムの投稿の種類とそのデータを読み込む方法についてもう少し詳しく学びます。

この機能は、あなたのサイトでは非常に重要です。あなたを推薦する人々を表示できるからです。 お客様の声はあなたのawesomenessの大きな社会的証拠です。 これを実現するには、複雑なプラグインやコードを必要としません。いくつかのファイルを見ると、あなたの証言のためにセクシーなプレゼンテーションを作成することができます。

さあ始めましょう!

圧縮してインストール

あなたが急いでこれをチェックする場合は、 ダウンロード し、それをインストールしてください。

あなたはいくつかのデータを追加する必要があります、あなたのダッシュボードで見ることができるブランドの新しい声を使用していくつかの功績を追加することによって:

リストの推薦状

次に、基本的なショートコードを使用してロードできます。

[証言rand = 0 max = 5]

そのコードを追加すると、ページに次のようなコードが表示されます。

主な功績

ここでは、この機能を追加して外観を変更することで、これを作成して調べる方法を見ていきます。

基礎

前にも述べたように、 ヘッダーメタデータ、プラグインファイルの作成、スクリプトの呼び出し。 長い話をすると、プラグインの名前でwp-content / pluginsの下に新しいフォルダが作成され、メインのプラグインファイルとなるフォルダと同じ名前のファイルが作成されます。

コピーと貼り付けが完了したら、次のようにしてください:

<?php / *プラグイン名:紹介文説明:顧客の紹介文を表示します。 バージョン:1.0作者:Web Revenueブログライセンス:GPL2 * / //スクリプトとスタイルをエンキューする関数plugin_scripts(){wp_enqueue_script( 'jquery');} wp_enqueue_script( 'flexslider'、plugins_url( 'js / jquery.flexslider-min.js'、__FILE__)、array( 'jquery')、 '2.2'、false); wp_enqueue_script( 'testimonials'、plugins_url( 'js / testimonials.js'、__FILE__)、array( 'jquery')、 '1.0'、false); wp_enqueue_style( 'flexsliderCSS'、plugins_url( 'css / flexslider.css'、__FILE__)、false、 '2.2'、 'all'); wp_enqueue_style( 'testimonialsCSS'、plugins_url( 'css / testimonials.css'、__FILE__)、false、 '1.0'、 'all'); add_action( "wp_enqueue_scripts"、 "plugin_scripts");

ここに私たちがやっていることがあります:

  • 私たちのプラグインの名前、著者、それが何をしているのかWPに伝える
  • 通常のスクリプト(jQueryなど)とカスタムスクリプト(flexsliderなど)を挿入する関数を作成し、スタイルシート
  • WPにスクリプト機能をデフォルトのスクリプト呼び出しでロードするように伝えるので、実際にはページにロードされます

すごく面白いですが、実際に/ jsと/ cssの下にファイルを作成することを忘れないでください。 デモのコンテンツにダウンロードするだけで、flexsliderファイルを探すのに掘り下げる必要はありません。

今、私たちは基本的なものをすべて用意して、面白い部分を始めることができます。

カスタム投稿タイプ

デフォルトでは、WordPressには2の一般的な投稿タイプ、ページ、投稿があります。 しかし、内部のポストタイプ(添付ファイルなど)もたくさんあるため、「ポストタイプ」の定義は次のとおりです。格納する必要のあるすべてのタイプのデータ。

私たちのプラグインは新しい機能を作成するので、WPにはそれを格納する組み込みの場所がないため、作成する必要があります。 小さなメスを恐れてはいけない、それは非常にシンプルです、あなたはこのコードを使用することができます:

//投稿タイプ関数を作成するためのブラックマジックcreate_post_type(){register_post_type( 'testimonials'、//新しい投稿タイプ配列( 'labels' => array( 'name' => __( 'Testimonials')、 'singular_name') => __( 'お客様の声'))、 'public' => true、/ *投稿の種類は一般向けですフロントエンドとwp-adminに含まれます* / 'supports' => array( 'title '、' editor '、' thumbnail '、' custom_fields ')、' hierarchy '=> false)); }

ここでは、register_post_type()関数を使用してWPに "Hey Buddy、この種のデータを保存する必要があります。受信準備をしてください"と伝えます。

また、この種のデータは「推薦状」と呼ばれ、パブリックアクセス(実際にダッシュボードに新しいメニュー項目を作成する)、必要なフィールド、階層的な(親ページと子ページがあるページのように)

WordPressを読み込むたびに呼び出す必要があります。 このフックはそれを行います:

add_action( 'init'、 'create_post_type');

カスタムフィールド

今私たちのカスタムポストタイプはタイトル(人物の名前)、内容(人物の証言)、写真(特色のあるイメージ)を持っていますが、リンクがありません。彼らのサイト、そう?

通常のカスタムフィールドを使用してこれを実行できますが、ユーザーがフィールドの名前を入力する必要がなく、検証ルールを追加できる「閉じた」フィールドを使用することをお勧めします。

まず最初に、新しいメタボックスを作成する必要があります。ポスト編集エリアにある素晴らしいパネルです。それぞれの小さなパネルはメタボックスです。 この関数はそれを作成して呼び出します:

// URLメタボックスフィールド関数を追加します。add_custom_metabox(){add_meta_box( 'custom-metabox'、__( 'Link')、 'url_custom_metabox'、 '紹介文'、 'side'、 'low'); add_action( 'admin_init'、 'add_custom_metabox');

add_meta_box()関数には次のパラメータが必要です。

  1. ID - それの一意の識別子です。 ここでユニコーン食べる虹や証言のリンクのようなユニークなものを使うことができます。 内部的に使用できるもの
  2. タイトル - ユーザーには何が表示されますか? ここでは、__()関数を使用することが重要です。これは、外国語のユーザーがあなたのプラグインを.poファイルで(プラグインファイルを編集せずに)翻訳できるようにする関数です。
  3. コールバック - あなたがメタボックスの実際の内容を持っている機能
  4. 投稿タイプ - このケースでは、お客様の声だけに表示されるようにしたい
  5. コンテキスト - ページ内のどこに表示するか
  6. 優先順位 - 同じ位置の他のアイテムより前である必要がある場合

今度は、url_custom_metabox()関数を呼び出すので、関数を作成する必要があります。

//管理領域のHTML関数url_custom_metabox(){global $ post; $ urllink = get_post_meta($ post-> ID、 'urllink'、true); //検証中! if(!preg_match( "/ http(s?):///"、$ urllink)&& $ urllink!= ""){$ errors = "このURLは無効です"; $ urllink = "http://"; } // invlid urlメッセージを出力し、http://を入力フィールドに追加しますif(isset($ errors)){echo $ errors; }?> <p> <label for = "siteurl"> URL:<br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<?php if(isset($ urllink) ){echo $ urllink;}?> "/> </ label> </ p> <?php}

さて、これを平易な英語に翻訳する:

  • グローバル変数$ postが呼び出されるので、どの項目が現在の項目のPOSTIDかを知ることができます
  • URLの現在の値を読み込みます
  • ユーザーが挿入した値が有効であるかどうかを検証します。 少なくとも1つの "http"または "https"オカレンスがある場合、値はOKです。それ以外の場合は有効です。デフォルト値を使用する必要があります
  • 次に、エラーがあれば表示します
  • これで、実際のHTMLが開始され、PHPの入力フィールドにデフォルト値が追加されました

この時点以降、ユーザーが送信した内容を実際に保存する必要があります。 "save_post"フックを使用します。そのため、WordPressが投稿を保存するたびに、この関数が呼び出されます:

//カスタムフィールドデータ関数を保存します。save_custom_url($ post_id){global $ post;} if(isset($ _ POST ['siteurl'])){update_post_meta($ post-> ID、 'urllink'、$ _POST ['siteurl'])); add_action( 'save_post'、 'save_custom_url');

ここでは、フィールド名である「サイトリンク」という投稿データがあるかどうかを確認します。 サイトリンクがある場合は、保存します。

すべてが整った後、あなたの新しい栄誉のページは次のようになります:

新しい証言

カスタムデータの読み込み

今度は実際にアイテムをロードする必要があります.get_posts()関数を使用します。これは単純なデータしか持たないため、適切なWPループが必要ないためです(DB呼び出しが多くなり、それを必要としない)。

だから、もしあれば、私たちのサイトのリンクを得るための関数を作成しましょう。

//投稿機能のURLを返すget_url($ post){$ urllink = get_post_meta($ post-> ID、 'urllink'、true); $ urllinkを返します。 }

これで、ショートコード機能を開始できます。 ショートコードデータをデフォルトにして検証する簡単な方法は、ループの属性を配列として作成することです。このように、新しいアイテムを必要に応じて追加することができます:

//ショートコードを登録して証言機能を表示するload_testimonials($ a){$ args = array( "post_type" => "testimonials"); if(isset($ a ['rand'])&& $ a ['rand'] == true){$ args ['orderby'] = 'rand'; } if(isset($ a ['max'])){$ args ['posts_per_page'] =(int)$ a ['max']; } //すべての紹介文を取得$ posts = get_posts($ args); // HTML出力} add_shortcode( "testimonials"、 "load_testimonials");

ご覧のように、ショートコード属性がロードされ、WordPressが必要とする形式で$ args配列に渡して検証すると、それらを使ってポストを読み込むことができます。

フレックススライダのデフォルト構造に従って、HTMLコードを追加する必要があります。 それはどのように見えるかは次のとおりです:

echo '<div>'; echo '<ul>'; foreach($ postsを$ postとして){//サム画像を取得する$ url_thumb = wp_get_attachment_thumb_url(get_post_thumbnail_id($ post-> ID)); $ link = get_url($ post); echo '<li>'; if(!empty($ url_thumb)){echo '<img src = "'。$ url_thumb。 '" />'; echo '<h2>'。$ post-> post_title。 '</h2>'; if(!empty($ post-> post_content)){echo '<p>'。$ post-> post_content。 '<br />'; if(!empty($ link)){echo '<a href="'.$link.'">サイトにアクセス</a> </p>'; echo '</li>'; echo '</ul>'; echo '</div>';

PHP関数の内部でHTMLコードを作成するのはなぜですか? 条件付きでコンテンツをロードできるのは、ユーザーがコンテンツを追加しただけで、空のHTMLタグを持たず、レイアウトを邪魔するのを待っているからです。

サイドバーはどうですか?

ほとんどの人は、サイドバーにお客様の声を表示したいだけです。このウィジェットはショートコードを処理しないため、実際にはうまくいきません。 これには単純なソリューションがあります。これをコードに追加するだけです:

add_filter( 'widget_text'、 'do_shortcode');

次は何ですか?

だから、あなたはこのチュートリアルを楽しんだのですか? あなたの証言のショートコードのオプションとして何を追加しますか? 将来の投稿のアイデアはありますか? コメント欄を使ってお知らせください!

ロチェスターオリベイラについて

私はブラジルのイタジュバ(MG)のウェブデザイナー兼起業家です。 あいまいなトピックについて書くこと、およびいくつかクールなことをすることが大好きです。

接続します。