ワードプレスチュートリアル:素晴らしいページフリッププラグインを作成する方法

  • インバウンドマーケティング
  • 更新:9月15、2014

注:このWPプラグインは、作者が現在私たちのために書いているわけではないため、サポートしていません。

今日から毎週、私たちは素晴らしいコーディングチュートリアルを紹介し、WordPressを使用してカスタムスムージングを行う方法を基本から高度に教えます。 今日、JSを使って "ページフリップ"ギャラリーを生成するためのプラグインを作成します(これで、基本的な手順を学びます)。

私はあなたのウェブサイトの初日にそれらの1つを見たことがあると思うが、それらは主にフラッシュを使用して行われましたが、現在は廃止されています(それでも価値はありますが、

基本的な機能は、新しい ギャラリーのタイプ いくつかの画像とそのサイズに基づいて、ショートコードを使用します。

さあ始めましょう!

圧縮してインストール

実際にそれを見るための最良の方法は、あなた自身でインストールすることです。 あなたはできる ここからダウンロード。 プラグインをインストールしてアクティブにしてください。次に、ショートコードをページに追加するだけです。

[flip_book ids = "78 79 78 79 79 78 78 79 79" width = "78" height = "300" display = "double"]

クイックプレビュー

そして、これはあなたが得る結果の種類です:

フリップブック効果

しかし、どんな黒い魔法がそこに行くの? まあ、それは実際にはとても単純です。 このようなものを作る方法を学びましょう。

ヘッダー

まず、新しいフォルダと新しい.phpファイルを作成する必要があります。 あなたがテスト環境を持っていれば、この時点で素晴らしいでしょう。だから、テストやテストをすることができます。

ファイルとフォルダにはシンプルでユニークな名前が必要です。既存のプラグインとの競合を避けることができます。 それでは、ファイルの基本的な内容は次のようなものです:

/ *プラグイン名:FlipBook Gallery説明:フリップブックギャラリーのショートコードを作成します。 バージョン:1.0作者:Web Reblogブログライセンス:GPL2 * /

かなり簡単ですね? このファイルを作成すると、WP admin> Pluginsの下のリストにプラグインが表示され、それをアクティブにすることができます(ただし、ファイル内にこのコンテンツしかない場合、サイトは大きく変わりません)。

スクリプトの呼び出し

ここで重要な外部資産を含める必要があります。 基本機能に必要な外部ファイルは次のとおりです。

  • jQuery(1.9 +)
  • Turn.jsスクリプト
  • 基本的なスタイリングを回す

スクリプトとスタイルタグを追加するだけで、いくつかの問題が発生します。 たとえば、ダブルjQueryコールはおそらくあなたのサイトを破壊します。 また、WordPress自体はあなたがそれらのアイテムを作成したことを「知っていません」ので、別のプラグインがturn.jsを再度呼び出すか、別のスタイルを設定するとサイトが壊れてしまいます。

そのため、常にwp_enqueue_script関数とwp_enqueue_style関数を使用する必要があります。 ここでは基本的な使い方です:

関数plugin_scripts(){wp_enqueue_script( 'jquery'); wp_enqueue_script( 'turn'、plugins_url( 'js / turn.js'、__FILE__)、array( 'jquery')、 '1.3'、false); wp_enqueue_style( 'turnCSS'、plugins_url( 'css / style.css'、__FILE__)、false、 '1.3'、 'all'); }

3の外部アイテムをさまざまな方法で呼び出しています。ここには次のものがあります。

  • 既存のアイテムを呼び出す:jQuery - WordPressが既にこのスクリプトをロードしていることが分かっている場合は、多くのパラメータを渡す必要はありません。単に「このスクリプトはここになければなりません。作業"
  • 新しいスクリプトを作成する - 名前、ファイルの場所、必要な項目(この場合はjQueryが必要)、バージョン、フッターやヘッダーに読み込まれているかどうか(false = header、true = footer)などの属性を渡す必要があります。
  • 新しいスタイルを作成する - 前のスタイルとほとんど同じですが、最後の属性に少しの違いがあります。

外部スクリプトを呼び出すときに考慮する必要がある重要なことの1つは、このプラグインに依存するコードがさらにあるかどうかです。 これは基本的にファイルがヘッダーまたはフッターで呼び出されるかどうかを定義します。

ここでは、HTMLが作成されたときにのみギャラリーを設定する追加のスクリプトがあり、それが本文に追加されます。 これは頭​​にこのスクリプトを追加しなければならない理由です。そうでなければ、私たちのコードが "turn"関数と呼ばれるとき、まだそこにはありません。

この素敵なコードの後、WordPressにそれらをスクリプトとしてロードするように指示する必要があります。アクション "wp_enqueue_scripts"はこれを行います:

add_action( 'wp_enqueue_scripts'、 'plugin_scripts');

ショートコード

ショートコードを作成するアクションから始めましょう。 それは非常に簡単です、あなたはshortcodeトリガと、実行される関数を追加する必要があります:

add_shortcode( "flip_book"、 "create_flip_book");

今度は、関数を作成して属性を取得する必要があります。 しかし、属性の一部はオプションである可能性があります。つまり、デフォルト値を作成する必要があります。 属性が空であるかどうかをテストするためにifをたくさん作成することができますが、これは3回操作が通常のif呼び出しよりも優れているケースの1つです。

三項演算は変数の値に直接if文の一種です。 次の構造に従うと:

$ variable =(CONDITION)? 「条件が真である場合の値」:「条件が偽である場合の値」。

関数の最初の部分で、それらを実際に見ることができます:

function create_flip_book($ attr){//処理するIDの準備$ array ['ids'] = explode( ""、$ attr ['ids']); //表示モード$ array ['display'] =空($ attr ['display'])? "single":$ attr ['display']; //標準値// width $ array ['width'] =空($ attr ['width'])? 400:$ attr ['width']; // height $ array ['height'] =空($ attr ['height'])? 300:$ attr ['height'];
    // HTMLとその他のコードはここにあります}

次に、HTMLを作成し、画像の基本的な呼び出しを行う必要があります。 ここでのもう1つの重要なポイントは、マガジンスタイルを使用している場合にサイズを調整することです(1つではなく2イメージがあるため、幅は2xでなければなりません)。

<?php if($ array ['display'] == "double"){$ array ['width'] = $ array ['width'] * 2; // HTML、JS、Black Magic?> <div id = "flipbook"> <?php for($ i = 0; $ i <sizeof($ array ['ids']); $ i ++){?> < div> <?php echo wp_get_attachment_image($ array ['ids'] [$ i]、 'full'); if($ array ['display'] == "single"){?> <span> <?= ""。($ i + 1)?> / <? echo "" .sizeof($ array ['ids'])?> </span> <?php} else {?> <spanright ":" left ");?>"> <?php echo ""($ i + 1)?> / <? echo "" .sizeof($ array ['ids']); ?> </span> <?php}?> </div> <?php}?> </div> <script type = "text / javascript"> jQuery( "#flipbook")。turn({width:< ?php echo $ array ['width'];?>、高さ:<?php echo $ array ['height'];?>、autoCenter:true、display: '<?php echo $ array [' display ']; ?> '、//シングルページまたはダブルページアクセラレーション:true、グラデーション:!jQuery.isTouch、}); </script>

どう思いますか?

これで、必要に応じてこれを微調整したり、オプションを追加したり(素晴らしいインスピレーションを得るための素晴らしい例をチェック)たり、うまくいかないものを調整したり、他のプラグインと組み合わせたりすることができます。

もう少し学びたいWordPressのコンセプトはありますか? たぶんあなたがする方法を学びたい何か? コメントを介してお知らせください。これを今後の投稿に含めるとうれしいです!

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

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

接続します。