人気サイトで、ワンクリックで人気投稿、最新投稿、おすすめ投稿を見ることができるタブエリアを見たことがあるだろうか。これはjQueryタブバーウィジェットと呼ばれ、異なるウィジェットを1つにまとめることでユーザー画面のスペースを節約することができます。今回は、WordPressにjQueryタブウィジェットを追加する方法を紹介する。
なぜjQuery Tabber Widgetを追加する必要があるのか?
WordPressサイトを運営していると、ドラッグ&ドロップのウィジェットを使って簡単にサイドバーに項目を追加することができます。サイトが大きくなるにつれて、サイドバーに十分なスペースがなく、有益なコンテンツをすべて表示できないと感じるかもしれません。そんな時に便利なのがタブバーです。同じエリアに異なる項目を表示することができます。ユーザーはそれぞれのタブをクリックし、最も興味のあるコンテンツを見ることができる。多くの有名サイトでは、今日、今週、今月の人気投稿を表示するのに使っています。このチュートリアルでは、タブウィジェットの作成方法を紹介します。ただし、タブに何を追加するかは紹介しません。基本的に、お好きなものを追加してください。
注: このチュートリアルは中級ユーザー向けで、HTMLとCSSの知識が必要です。初級レベルのユーザーはこの投稿を参照してください。
WordPressでjQueryタブウィジェットを作成する
始めよう。まず最初に、デスクトップにフォルダーを作成し、wPBeginner-tabber-widgetという
名前をつけます。その後、メモ帳のようなプレーンテキストエディターを使って、このフォルダー内に3つのファイルを作成する必要があります。
最初に作成するファイルはwpb-tabber-widget.php
です。このファイルには、タブとWordPressカスタムウィジェットを作成するためのHTMLとPHPコードが含まれる。2番目に作成するファイルはwpb-tabber-style.cssで
、タブコンテナのCSSスタイリングが含まれます。3番目と最後のファイルはwpb-tabber.jsで
、タブを切り替えてアニメーションを追加するためのjQueryスクリプトが含まれる。
wpb-tabber-widget.php
ファイルから始めましょう。このファイルの目的は、ウィジェットを登録するプラグインを作成することです。WordPressウィジェットを作成するのが初めての場合は、WordPressウィジェットのカスタマイゼーションガイドを参照するか、このコードをwpb-tabber-widget.php
ファイルにコピー&ペーストすることをお勧めします:
[cbk1]
上記のコードでは、まずプラグインを作成し、そのプラグインの中にウィジェットを作成しました。ウィジェットの出力セクションにスクリプトとスタイルシートを追加し、タブのHTML出力を生成しました。最後に、ウィジェットを登録します。各タブに表示したいコンテンツを追加する必要があることを忘れないでください。
タブに必要なPHPとHTMLコードでウィジェットを作成したので、次のステップは、タブコンテナにタブとして表示するためにjQueryを追加することです。そのためには、このコードをwp-tabber.js
ファイルにコピー&ペーストする必要があります。
[SKX1]
(function($) {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {)
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}.
else {$(activeTab).fadeIn();}.
return false;
});
})(jQuery);
[SKX2]
これで、jQueryを使ったウィジェットの準備ができました。最後のステップは、タブにスタイルを追加することです。スタイルシートのサンプルを作成したので、wpb-tabber-style.css
ファイルにコピー&ペーストしてください:
[cbk2]
これですべてです。あとはwpbeginner-tabber-widget
フォルダをFTPでWordPressサイトの/wp-content/plugins/
ディレクトリにアップロードするだけです。また、このフォルダーをzipアーカイブに追加し、WordPress管理エリアのプラグイン ” 新規追加に移動することもできます。アップロードタブをクリックしてプラグインをインストールしてください。プラグインが有効化されたら、外観 ” ウィジェットに移動し、WPBeginner Tabber Widgetをサイドバーにドラッグ&ドロップしてください。
このチュートリアルがWordPressサイトのjQueryタブ作成に役立てば幸いです。ご質問やフィードバックは、下にコメントを残すか、TwitterまたはGoogle+にご参加ください。
Nitish Chauhan
Hi,
My plugin is activated but in the widget section it show “There are no options for this widget.” message.please tell me how to activate all the function and i want to create plugin like
“jQuery(document).ready(function() {
var wrapper = jQuery(“.input_fields_wrap”); //Fields wrapper
var add_button = jQuery(“.add_field_button”); //Add button ID
//initlal text box count
jQuery(add_button).click(function(e){ //on add input button click
e.preventDefault();
//max input box allowed
//text box increment
jQuery(wrapper).prepend(‘×’); //add input box
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(“click”,”.remove_field”, function(e){ //user click on remove text
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
});”
my code of java script .please suggest if you have any solution.
Thanks
Nabam Rikam
I have inserted the plugins in the sidebar, but when i try to click it says there is no option for this plugin. And after we browse it in website, we see three blank tbs. Guide me here a little bro.
goutham
Iam not gettng tabs r widgets in my site.i have copied on pasted same code.It is not working.
Kunle
i want to place the plugin just created in a place in my page, and not in the side bars or footer.
how do i do that, to place it anywhere in my web page
Zadius
This is the second tutorial I have tried and for some reason the plugin file does not show up under the plugin directory on my site. I upload the file directly using FTP but when I log into my wordpress admin area nothing appears under the plugin’s tab. Please advise. Thank you.
Update: I zipped the file and uploaded it via the wordpress plugin interface. The file does not appear in my plugin’s folder on my FTP interface so I have zero clue where it show’s up. But I got it installed so thanks!
John
Thank you for the tutorial. However, I noticed that the title is missing when I add the widget to the widget area. How can I add the title space to input a title?
Drazen
Hey
Thanks for this. I was just wondering, how to add option, so that when I am viewing widget, I can simply paste links in it, in each tab?
For example:
Tab 1 (option to rename it in widget options)
– Text box below it in widget options(so that I can add text, links etc.)
Tab 2 (option to rename it in widget options)
– Text box below it in widget options(so that I can add text, links etc.)
Tab 3 (option to rename it in widget options)
– Text box below it in widget options(so that I can add text, links etc.)
Thanks
Gavin Wilshen
Brilliant tutorial. Thanks guys!
Grant
It keeps giving me this error:
Plugin could not be activated because it triggered a fatal error.
Parse error: syntax error, unexpected T_NS_SEPARATOR, expecting T_STRING in /home/content/11/10826211/html/wp-content/plugins/wpbeginner-tabber-widget/wpb-tabber-widget.php on line 16
WPBeginner Support
Grant, we just checked the code again. The plugin activated just fine on our end.
管理者
Rahul
Thanks man you’re a genius. I was just going to buy a premium plugin from codecanyon and then found this guide.
Jonathan
Why is it that when I install this plugin it is saying it needs to be updated, and the update is from a another developer & is over 3 years old?
WPBeginner Support
It should not do that. If you have changed the plugin name and it matches another plugin then WordPress would confuse it with the other plugin.
管理者
Jonathan
I didn’t change anything; I only did just what you showed above.
Jonathan
This is the plugin that WordPress thinks it is & is trying to update it to. http://wordpress.org/plugins/tabber-widget/
I just updated the plugin to version 2.0 & that (for whatever reason) got it to stop asking to update it to the other plugin. I’d try renaming & changing the other plugin info, but that was the only thing that seemed to work.
WPBeginner Support
The only reason we can think of is that you probably named the plugin file or folder to tabber-widget.php instead of wpb-tabber-widget.php which caused WordPress to confuse the plugin with this other one. The version trick is ok too until this other plugin releases 2.0+ so its bed to clear the confusion.
WPBeginner Support
We were unable to reproduce this. Do you have access to another WordPress site where you can try this, just to test that there is nothing wrong on your end?
Doris
This kind of defeats the purpose of WordPress being dynamic, doesn’t it? Hard coding text into a widget? Is there a way to pull dynamic content from the database? Us noobs don’t have much coding experience ya know…One would think there is a plugin that would do this…
WPBeginner Support
This tutorial is aimed at intermediate level users and the goal here is to show them how to create a tabber widget. For beginner level users, there are several built in template tags that can dynamically generate content inside each tab. For example:
Display a list of your WordPress pages:
1-click Use in WordPress
Show Random Posts:
1-click Use in WordPress
Show recent comments:
1-click Use in WordPress
And many more.
管理者
manoj sakhwar
Nice article. thanks…
Grant
What I don’t understand is where to paste the code. What type of document do I put the code in? (I have mac).
WPBeginner Support
Use TextEdit to create these files.
管理者
Keith Davis
Love this one guys.
Always looking for ways to make better use of limited real estate.
Jim Davis
Installed the files and activated the widget. It displays as expected, however, clicking the Tab 2 and Tab 3 tabs does not change the content. The content remains as the content under Tab 1. Have I missed something? See my test site at http://jimdavis.org/blog/
Jim
WPBeginner Support
Jim you have not missed any thing. This is an example widget and you can edit it. Enter your own code and content inside each tab by editing the plugin file wpb-tabber-widget.php
管理者