Drupal 7用のモジュールを作成します。パート2

まえがき





最初のパートでは、Drupal 7のモジュールの作成方法を示しました。約束どおり、モジュールにjsファイルを追加する方法(jQueryを使用)とローカライズ方法を示します。





jsファイルを追加する





最初に、モジュールフォルダーにjsファイルを作成します。 main.jsと呼びました



次に、次の行をrss_feeds.infoファイルに追加します。



スクリプト[] = main.js



私のモジュールでは、jQueryを使用しました。 main.jsでは 、Upボタンの関数を実装します。 競合を避けるために、以下を書く必要があります。



(function ($) { })(jQuery);
      
      







そして、この構成では、コードを記述します。



 $.fn.extend({ topMouseover: function(self) { this.on('mouseover',function() { self.opacity.stop().animate({opacity:"1"},300); self.button.stop().animate({opacity:"1"},300); }); }, topMouseout: function(self) { this.on('mouseout',function() { self.opacity.stop().animate({opacity:"0"},300); self.button.stop().animate({opacity:"0.4"},300); }); }, wScroll: function(g) { if(g == 0) this.removeClass("no-count"); if(!this.hasClass("no-count")){ if(g > 500 && this.is(":hidden")){ this.addClass("visible"); this.css("cursor","pointer"); this.fadeIn(500); this.click(function(){ $("body, html").animate({scrollTop:0},600); this.fadeOut(300); this.addClass("no-count"); }); } if(g < 200 && this.hasClass("visible")){ this.removeClass("visible"); this.fadeOut(300); } }else{ this.unbind("click"); } } }); function toTopBtn(toTop, opacity, btn) { this.toTopBtn = $(toTop); this.opacity = $(opacity); this.button = $(btn); this.windowScroll(); this._init(); return this; } toTopBtn.prototype = { _init: function () { var self = this; this.toTopBtn.topMouseover(self); this.toTopBtn.topMouseout(self); }, windowScroll: function() { var g = $(window).scrollTop(); this.toTopBtn.wScroll(g); } } $(document).ready(function() { upButton = new toTopBtn(".toTopWrapper",".toTopOpacity",".toTopBtn"); $(window).scroll(function(){ upButton.windowScroll(); }); });
      
      







ただし、デフォルトでは、Drupal 7にはjQuery 1.4.4が付属しています。 .on()関数は実装されていません。 jQueryを更新するには、 Query Updateモジュールをダウンロードします。 すべてが直感的に理解できます。 設定で、目的のバージョンを選択します(1.8を選択しました)。



ボタンを表示するために、 rssfeeds_content.tpl.phpファイルを変更します。



 <div class="toTopWrapper"> <div class="toTopOpacity"></div> <div class="toTopPanel" title="Up"> <div class="toTopBtn"> <span class="arrow">↑</span> <span class="label">up</span> </div> </div> </div> <br><br> <?php foreach ($items->channel->item as $item): ?> <span class="title"><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></span><br><br> <?php echo $item->description; ?><br><br><?php echo $item->pubDate; ?> <hr><br><br> <?php endforeach; ?>
      
      







...そして、main.cssにスタイルを追加します。



 /* "TO UP" BUTTON */ .toTopWrapper { position:fixed; top:0; bottom:0; left:0; width:7%; display:none; background-color: #87ceeb; opacity: 0.3; } .toTopOpacity { position:fixed; top:0; bottom:0; left:0; width:7%; background-color: #87ceeb; opacity: 0.1; } .toTopWrapper .toTopPanel { width:100%; height:100%; font-size:13px; color: black; padding-top:10px; position:relative; } .toTopWrapper .toTopBtn { text-align:left; line-height:15px; margin-left: 30%; font-family:tahoma,arial,verdana,sans-serif; font-weight:bold; opacity: 0.2; } .toTopWrapper .toTopBtn .arrow{ font-size:14px; font-weight:bold; vertical-align:middle; } /* END OF "TO UP" BUTTON */
      
      







これで、RSSフィードのコンテンツを表示するページに[上へ]ボタンが表示されます。



モジュールのローカライズ





すべてのモジュール翻訳はtranslationsフォルダーに保存され、少なくとも2つのファイルで構成されます-modulename.pot (これは翻訳テンプレートです)とmodulename.po (翻訳自体)。



これらのファイルを生成するには、 翻訳テンプレート抽出モジュールを使用します。 このモジュールをダウンロードしてインストールします。 admin / config / regional / translateページに移動して、 EXTRACTタブを選択します。 モジュールを選択して、[ 抽出 ]をクリックします。







テンプレートファイルrss_feeds.pot取得し翻訳モジュールのフォルダーに保存します。



次に、ロシア語の翻訳用テンプレートファイルにスイッチを配置し、[ 翻訳含める]チェックボックスをオンにします。 受信した翻訳rss_feeds.ru.poを同じフォルダーに保存します。



あとは、.poファイルを開いて、そこに翻訳を入力するだけです。 これで、モジュールをインストールすると、翻訳が自動的にインポートされます。



おわりに





これについては、Drupalのモジュール開発のトピックに関する記事を書くことになります。 作成されたモジュールには、Drupalの非常に小さな機能が示されているため、学ぶべきことがたくさんあります。 これらの記事が、Drupalの学習方法の最初の段階で役立つことを願っています。



ご清聴ありがとうございました!



All Articles