(1)必要なモジュール(バージョン:Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2)モジュールのインストール
Drupal7では、adminセクションからモジュールをインストールできますが、Druaplサイトでモジュールリンクを検索してから、管理モジュールのインストールエリアに貼り付けてコピーする必要があるため、この新機能には意味がないと感じています。クレイジー。彼らがワードプレスのような小さな検索のごちそうのようなものにしていたなら、それはとても良かったでしょう。とにかく、ダウンロードして古い方法でインストールします(この古い方法をお勧めします)。
Drupalサイトからすべてのモジュールをダウンロードし、yoursitename / sites / all / modulesディレクトリにインストールします。http://www.yoursitename.com/node#overlay=admin/modulesに移動して、以下のようにこれらのモジュールを有効にします。
(1)ビュー(2)ビューUI(3)ビュースライドショー(4)ビュースライドショー:サイクル(5)カオスツール(6)リンク(7)ライブラリ(8)トークン(オプション)(3)イメージキャッシュの作成
Drupal7では、画像キャッシュはコアモジュールの一部であり、画像スタイルと呼ばれています。そこで、ここから2つの画像キャッシュを作成します。1つはフルサイズのスライダー画像用で、もう1つはサムネイル画像用です。このチュートリアルでは、フルサイズのスライダー画像に935x293(ピクセル)の寸法を使用し、サムネイル画像に210x100(ピクセル)の寸法を使用します。注:これらの構成は延期できますが、ニーズによって異なります。
http://www.yoursitename.com/node#overlay=admin/config/media/image-stylesに移動し、[新しいスタイルを追加]リンクをクリックします(1)画像のスタイル名を入力し、[新しいスタイルを作成]ボタンをクリックします(2 )次の設定画面で新しいスタイルを選択し、[追加]ボタンをクリックします(このチュートリアルでは、サイズ変更スタイルを選択します)(3)次の画面で、幅と高さを設定し、[効果を追加]ボタンをクリックします。(設定は、選択したスタイルによって異なる場合があります)。幅を935、高さを293ピクセルに設定しました。
サムネイル画像についても同じプロセスを実行します。(サムネイル画像の寸法では、幅を210、高さを100ピクセルに設定しています。)(4)新しいコンテンツタイプを作成します。
新しいコンテンツタイプを作成してみましょう。ダッシュボードメニューバーの[構造]をクリックし、次にコンテンツタイプをクリックして、[新しいコンテンツタイプの追加]リンクをクリックします。
(1)人間が読める形式の名前を付けます。私はそれをおすすめスライダー(マシンの名前は人間が読める形式の名前に基づいて自動生成されます)と名付けました。(2)簡潔で関連性のある説明を入力します。デフォルト設定(4)公開オプション、公開のみをオンにしました(他のすべての設定はオフ)(5)表示設定、自動時刻と日付情報をオフにしました。(6)コメント設定、非表示(無効)に設定(7)メニュー設定、デフォルト設定のままにします。(8)[保存してフィールドを追加]ボタンをクリックします(5)新しいフィールドを作成します
この例では、2つのフィールドのみを作成します。それらは、画像フィールドとリンクフィールドです。スライダー画像のアップロードには画像フィールドを使用し、スライダーをリンクするカスタムリンクを作成するにはリンクフィールドを使用します。
画像フィールド設定
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
このフィールドを必要に応じて設定し、slider-imageというファイルディレクター名を追加して、この画像が他の画像から分離して配置されるようにしました。アップロードの最大サイズと解像度をここで設定できます。Altとタイトルフィールドを有効にし、最後に[設定を保存]ボタンをクリックします。
同じ方法を使用して、リンクフィールドも作成します。
リンクフィールドの設定(1)ラベル:スライダーリンク(2)フィールド:slider_link(3)フィールドタイプ:リンク(4)ウィジェット(フォーム要素):リンク(5)[保存]ボタンをクリックします。リンクフィールドの設定については、evrythingをデフォルト設定のままにします。以下に示すようにフィールドを再配置しました。タイトルフィールド画像フィールドリンクフィールド本文フィールド(必要に応じてこのフィールドを削除することもできます)ディスプレイの管理ディスプレイの管理タブで、フィールドの出力をどのように表示するかを設定できます。リンクフィールドを非表示に設定し、画像ラベルも非表示に設定しましたDrupal7:フィールドを管理します(6)機能スライダーコンテンツを作成します
このチュートリアルでは、4つのおすすめのスライダーコンテンツを作成しました。
(1)[コンテンツを追加]リンクをクリックします(2)注目のスライダーコンテンツを作成します(3)適切なタイトル名を付けます(4)スライダー画像をアップロードします(5)代替とタイトルフィールド名を付けます(6)リンクのタイトルとURLを好きな場所に付けますリンクするスライダー(7)SEOフレンドリーなURLエイリアスを指定する場合は、パスフィールドを除き、その他の設定はすべてデフォルトのままにします。(8)コンテンツを保存します。
同じ方法で、さらに注目のスライダーコンテンツを作成します(私は4つのコンテンツを作成しました)(7)新しいビューを作成します
次に、新しいスライドショービューを作成します。[ダッシュボード]メニューから構造をクリックし、[ビュー]をクリックします。
(1)[新しいビューを追加]リンクをクリックします(2)ビュー名を付けます、私はおすすめスライダーとして名前を付けました(マシン名は自動生成されます)(3)適切なビューの説明を付けます(4)[おすすめスライダータイプのコンテンツを表示]を選択します(コンテンツタイプ名)。(5)[ページの作成]チェックボックスをオフにし、[ブロックの作成]をオンにします(6)ブロックタイトルを入力し、表示形式をページあたりの「フィールド」アイテムの「スライドショー」として選択します5(表示するアイテムの数を入力できます)(7 )[Continue&edit]ボタンをクリックします。フィールドの設定最初にリンクフィールドを追加しましょう(リンクがすべてを正しく機能させるためには、最初のフィールドである必要があります)。追加アイコンをクリックし、[Groups]フィルターから[Content] [Content] [Add Content]を選択します。次の構成ウィンドウの「追加と構成ボタン」で「ラベルの作成」のチェックを外します。"小切手" 表示から除外します。「適用ボタン」をクリックします
次に、画像フィールドを追加してみましょう。追加アイコンをクリックし、フィルターグループからコンテンツを選択しますコンテンツの追加:画像フィールド(注:このスライダーコンテンツタイプに対してのみ作成した画像フィールドを選択してください。)[追加して構成]をクリックします。次の設定ウィンドウで「ラベルを作成」のチェックを外します。
フォーマッタ:画像(カラーボックスまたはライトボックスをインストールしている場合は、ここで選択できます!)画像のスタイル:フルサイズ(上記の手順で作成した画像キャッシュを選択)画像のリンク先:なしスタイルの設定:デフォルト設定のままにする結果の動作なし:残す既定の設定結果の書き換え:チェックこのフィールドをリンクとして出力リンクパス:[view_node](注:少しスクロールすると、コアトークンモジュールによって作成された置換パターンが表示されます(リンクフィールドを最初に設定しなかった場合)ここにはリンクフィールドオプションが表示されません)[view_node]のみをコピーしてから、上にスクロールしてリンクパスフィールドに貼り付けます。)[適用]ボタンをクリックします。
最後に、サムネイル用にもう1つのフィールドが必要なので、追加アイコンをクリックし、フィルターの[グループ]から[コンテンツ] [コンテンツの追加:画像フィールド]を選択します(注:このスライダーコンテンツタイプに対してのみ作成した画像フィールドを選択してください)。次の構成ウィンドウで[追加と構成]ボタンをクリックし、[ラベルの作成]チェックボックスをオフにして、表示から除外、フォーマッタ:画像(カラーボックスまたはライトボックスをインストールしている場合は、ここで選択できます!)画像スタイル:サムネイル(画像キャッシュを選択します)上記の手順で作成しました)リンク画像:なしスタイル設定:デフォルト設定のまま結果の動作なし:デフォルト設定のまま結果の書き換え:チェックこのフィールドをリンクとして出力リンクパス:[view_node](注:ダウを少しスクロールしてCore Tokenモジュールによって作成された置換パターンを見ることができます(私たちがしなかった場合t最初にここにリンクフィールドオプションが表示されないようにリンクフィールドを設定します)[view_node]のみをコピーし、上にスクロールしてリンクパスフィールドに貼り付けます。)[適用]ボタンをクリックします。
ビューフィルター設定
views3では、フィルターは最初に作成され、コンテンツタイプやその他の設定を選択します!追加のファイタリングが必要な場合は、ここで作成できます。
ビューのスタイル設定
[スライドショーのフォーマット]をクリックします。settigsおよび次のように設定された次の設定ウィンドウで; (1)リストタイプ:順不同リスト(2)ラッパークラス:デフォルト設定のままにします(3)スタイル>スキン:デフォルト(4)スライド>スライドショータイプ:サイクル(5)サイクルオプションjQueryサイクルプラグインをダウンロードしてjqueryをコピーする必要があります。 cycle.all.min.js to sites / all / libraries / jquery.cycleプラグインはhttp://malsup.com/jquery/cycleにあります。
簡単な英語site / allディレクトリに「libraries」という名前のフォルダーを作成してから、そのディレクトリに「jquery.cycle」という名前の別のフォルダーを作成し、最後に「jquery.cycle.all.min.js」のみをコピーして貼り付けますこのディレクトリ。
(6)トランジション:フェード(7)アクション:ホバーで一時停止(8)Internet Explorerの微調整:デフォルト(9)ウィジェット:上部または下部のいずれかまたは両方を選択できます(ここでは下部を選択し、以下のように詳細設定を行います)。 (10)下部ウィジェット>ページャー>ページャータイプ:フィールド(11)ページャーフィールド:コンテンツ:画像(注:親指用に最後に追加したもの、両方のフィールドに同じ名前が付けられるため、間違えないでください。)(12)スライドをアクティブ化ポケットベルホブで一時停止:オン、コントロール、スライダーカウンターをオフのままにします。(13)「適用」ボタンをクリックします。
書式表示フィールド設定
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8)カスタムリージョンの作成(オプションのステップ)
(1)yoursフォルダーでyour_theme_name.infoファイルを開き、以下に示すような新しいリージョンを追加します。regions [featured_slider] =注目のスライダーで、.infoファイルを保存します。(2)以下のように、テーマのpage.tpl.phpファイルを開き、スライドを表示する場所にこれらのコードを追加します。
page--front.tpl.phpのようなカスタムフロントページテンプレートを作成して、デフォルトのpage.tpl.phpテンプレートに変更を加える必要がないようにすることもできます。[9]ブロックを有効にして構成する
これで、このブロックはブロック無効化領域に表示されるので、ダッシュボードメニューから[構造]> [ブロック]に移動し、ブロックをテーマのデフォルト領域または作成したカスタム領域(featured_slider)に対して有効にします。(地域は、使用しているテーマによって異なります。)
ブロック構成設定ブロックを有効にすると、ブロックを構成するためのリンクが表示されるので、[構成]リンクをクリックし、以下のように設定セクションを設定します。
(1)ブロックタイトル(ブロブタイトルを表示したくない場合は、と入力するだけです)(2)ここでも、有効なテーマ固有の地域設定がすべて取得されます。表示設定(3)[ページ]> [特定のページにブロックを表示]を選択:[リストされたページのみ]を選択して入力すると、このブロックはフロントページにのみ表示されます。サムネイルをインラインで表示するためのCSSヒント
これらのCSSコードをテーマのスタイルシートに追加して、サムネイルをインラインで表示します。.views-slideshow-controls-bottom .views-slideshow-pager-field-item {float:left; マージン:20px 6px; }必要な調整を行います。