طرح در دست ساخت به صورت psd
[ad_1]
طرح در دست ساخت به صورت psd ، دارای ۲ استایل متفاوت که هر کدام دارای ۴ رنگ زیبا هستند.
—————–
» دانلود طرح در دست ساخت به صورت psd
» حجم : ۶٫۵۲ مگابایت
» منبع : freescript.ir
نوشته طرح در دست ساخت به صورت psd اولین بار در پدیدار شد.
[ad_2]
لینک منبع مطلب
افزونه مدیریت فایل های دانلودی وردپرس WordPress Download Manager Pro + افزودنی ها
[ad_1]
WordPress Download Manager Pro نام بهترین افزونه مدیریت اسناد و فروش محصولات دیجیتال برای وردپرس است که قبلا نسخه رایگان آن را به شما معرفی کردیم، در این مطلب قصد داریم نسخه pro این افزونه کاربردی را در اختیار شما قرار دهیم. این افزونه با ویژگی های غنی و پیشرفته از جمله محافظت از اسناد با رمز عبور، کنترل دسترسی به اسناد بر اساس نقش ها و قابلیت های اعضا، دسترسی به اطلاعات ورود، فروش محصولات دیجیتال و بسیاری ویژگی های دیگر کار مدیریت فایل های دانلودی را برای شما آسان تر می کند.
از قابلیت های اصلی افزونه وردپرس WordPress Download Manager Pro می توان به امکان استفاده از انواع فایل ها در ورودی، دانلود فایل ها در بخش فرانت اند در قالب فایل زیپ، امکان ممنوع کردن کاربران خاص از دانلود، قابلیت تعیین دسترسی برای کاربران جهت دانلود فایل، امکان کنترل پهنای باند، قابلیت وارد کردن همزمان چندین فایل با استفاده از ftp و قرار دادن آنها در یک پکیج و بسیاری قابلیت های دیگر اشاره کرد.
این افزونه قابلیتی ایجاد کرده تا بتوانید توسط شبکه های اجتماعی برای دانلود فایل محدودیت ایجاد کنید، به طور مثال می توانید دانلودها را با دکمه اشتراک گذاری لینکدین قفل کنید و کاربر پس از اشتراک گذاری آن در لینکدین قادر به دانلود باشند. افزونه WordPress Download Manager Pro یک افزونه ۱۰۰ درصد واکنشگرا می باشد که با دستگاه های مختلف مانند موبایل، تبلت، لپ تاپ و دسکتاپ سازگار است. در ادامه مطلب به برخی دیگر از امکانات افزونه مدیریت فایل های دانلودی وردپرس WordPress Download Manager Pro اشاره خواهیم کرد.
نوشته افزونه مدیریت فایل های دانلودی وردپرس WordPress Download Manager Pro + افزودنی ها اولین بار در بیست اسکریپت. پدیدار شد.
[ad_2]
لینک منبع مطلب
چگونه در وردپرس یک صفحه اصلی سفارشی بسازیم؟ با برنامه‌نویسی و بدون برنامه‌نویسی
[ad_1]
بدون شک تمامی مدیران کسب‌وکارهای اینترنتی در پی این هستند که با جذاب نشان دادن سایت خود کاربران بیشتری را به خود جذب کنند و یکی از مواردی که تأثیر زیادی در این مورد دارد صفحات اصلی هر سایت است. ممکن است برای خود شما هم پیش‌آمده باشد که با دیدن صفحه اصلی یک سایت به آن جذب و یا از دیدن بقیه سایت منصرف شده باشید. پس بیایید یک صفحه اصلی سفارشی برای سایت وردپرسی خود بسازیم.
شما برای اینکه بتوانید یک صفحه اصلی سفارشی جذاب برای سایت خود بسازید راه‌های مختلفی دارید که ما قصد داریم در اینجا برای شما آموزشی در خصوص این راهکارها قرار دهیم. پس با ما همراه باشید.
آنچه در این مطلب می‌خوانید:
خب قبل از اینکه بریم سراغ راه‌های سفارشی‌سازی کردن صفحه اصلی یک توضیح در این خصوص برای شما خواهیم گفت.
صفحه اصلی بهعنوان مهم‌ترین صفحه هر سایت به‌حساب می‌آید که تأثیر فراوانی در جذب کاربر دارد. درواقع کاربر زمانی که آدرس سایت شما را وارد می‌کند در وهله اول با صفحه اصلی شما رویه‌رو خواهد شد و این صفحه اصلی است که کاربر را به صفحات دیگر موجود در سایت شما هدایت می‌کند.
بهصورت کلی در این صفحه باید یک کلیت از فعالیتی که دارید قرار دهید. مثلاً اگر شما یک فروشگاه اینترنتی راه‌اندازی کردهاید باید در صفحه اصلی خود محتوایی قرار دهید که کاربر به‌محض ورود به این موضوع پی ببرد. درواقع کاربر با دیدن صفحه اصلی شما باید از تجارت شما آگاه شود.
دقت داشته باشید که باید در این صفحه اطلاعاتی در خصوص شغل خود قرار دهید و تا کاربر با شما و کسب‌وکارتان آشنا شود. همچنین موارد زیادی هستند که در تأثیرگذاری صفحه اصلی مهم هستند پس باید به تمامی این موارد مانند رنگ، محتوا و یا حتی پس‌زمینه‌ای که در سایت استفاده میکنید اهمیت ویژه‌ای بدهید.
همانطور که می‌دانید شما برای انتخاب صفحه اصلی خود هیچ محدودیتی ندارید و میتوانید صفحه اصلی را به‌دلخواه خود سفارشی‌سازی کنید. این موضوع یکی از مزیت‌های مهم وردپرس به‌حساب می‌آید.
شما این امکان را دارید که هر صفحه‌ای را بهعنوان صفحه اصلی سایتتان در نظر بگیرید. برای این کار کافی است وارد پیشخوان وردپرس خود شوید و از قسمت برگه‌ها، افزودن برگه جدید را انتخاب کنید. بعد از انتخاب این گزینه یک صفحه جدید برای شما باز خواهد شد که شما میتوانید هر مورد دلخواه را در این صفحه سفارشی‌سازی کنید و سپس آن را منتشر کنید.
برخی مواقع ممکن است شما بخواهید یک وبلاگ بر روی صفحه اصلی خود به‌نمایش در بیاورید که برای این کار باید دقیقاً همان روند بالا یعنی پیشخوان» برگه» افزودن برگه جدید را طی کنید.
بعدازاینکه صفحه‌ی جدید برای شما باز شد باید در قسمت عنوان “وبلاگ” را وارد کنید و بدون وارد کردن هیچ محتوایی بر روی “انتشار” کلیک کنید.
در قدم بعدی باید از پیشخوان» تنظیمات» خواندن را انتخاب نمایید. با وارد شدن به صفحه مربوطه باید گزینه‌ی یک برگه یکتا را انتخاب کنید و مشخص کنید که میخواهید این برگه بهعنوان صفحه اصلی انتخاب شود.
در مرحله بعد باید صفحه اصلی و صفحات وبلاگی را که قبلاً ایجاد کردهاید انتخاب کنید.
خب حالا شما یک صفحه جدید بهعنوان صفحه اصلی سایت خود ساخته‌اید و الآن باید آن را سفارشی‌سازی کنید.
خب اولین روشی که قصد داریم در این مقاله برای شما توضیح دهیم استفاده از صفحهساز میباشد. این روش برای شما دردسری نخواهد داشت و شما برای استفاده از این روش نیازی به مهارت خاصی در کد نویسی ندارید.
یکی از دلایلی که سبب استفاده بیشتر از این روش شده است همین راحتی استفاده از آن است. در این روش تنها کافی است از یک صفحهساز وردپرسی استفاده کنید. همین!
افزونههای کاربردی بسیاری در این زمینه طراحی شده‌اند که میتوانند کمک شایانی به شما کنند. شما پس‌ازاینکه یکی از این پلاگین‌ها را برای سایت خود انتخاب کردید کافی است برای ساخت یک صفحه جدید عناصر دلخواه خود را با کشیدن و رها کردن جایگذاری کنید.
اگر برای انتخاب یک صفحهساز حرفهای با مشکل مواجه شدید میتوانید یکی از مقاله‌‌های ما را که در مورد صفحه‌‌سازها در سایت قرار دادهایم را مطالعه کنید. صفحه ساز وردپرس چیست؟ بهترین صفحه ساز وردپرس چیست؟
با استفاده از این افزونهها میتوانید هر محتوایی را در هرجایی که بخواهید قرار دهید و صفحات بسیار جذابی مطابق با سلیقه خود بسازید. پس بدون تردید اگر میخواهید صفحات بی‌نظیری برای سایت خود طراحی کنید یک افزونه برای خود انتخاب کنید و صفحات منحصربه‌فردی برای خود طراحی کنید.
خب مسلماً اگر با وردپرس سایت خود را راه‌اندازی کردهاید در جریان هستید که در آپدیت جدید ویرایشگر کلاسیک جای خود را به ویرایشگر گوتنبرگ داده است. یکی از امکانات بسیار جذاب گوتنبرگ این است که امکاناتی را برای طراحی‌های جذاب در اختیار کاربر خود قرار میدهد.
ویرایشگر جدید شامل بلوکهای بسیاری است که هر یک کاربردی مجزا دارند. مثلاً برخی از این بلوک‌ها در جهت سفارشی‌سازی و جذاب کردن صفحات کارکرد دارند که شما به‌راحتی میتوانید از آنها استفاده کنید.
یکی از ویژگی‌های مهم این بلوک‌ها تنظیمات متنوعی است که در اختیار کاربر قرار میدهد و کاربر قادر است با این تنظیمات هر تغییر دلخواهی را در صفحات خود اعمال کند.
همچنین شما این امکان را دارید که بلوکهای موجود را با افزونههای بلوک Gutenberg گسترش دهید. این افزونهها به شما اجازه استفاده از عناصر پیشرفته را خواهند داد. یکی از پلاگین‌‌هایی که در این زمینه به شما پیشنهاد میکنیم افزونه Astra میباشد که بهصورت رایگان برای شما در دسترس است.
روش سومی که در اینجا برای شما شرح دادهایم معمولاً برای افرادی که درزمینهٔ کد نویسی مهارتی ندارند پیشنهاد نمی‌شود. برای افراد مبتدی روش اول کاربردی‌تر و راحت‌تر خواهد بود.
در این روش شما باید از یک سری نکات در خصوص برنامه‌نویسی آگاهی داشته باشید. برای استفاده از این روش باید با شیوه‌های برنامه‌نویسی وردپرس، PHP،HTML و CSS تا حدودی آشنا باشید.
خب همانطور که می‌دانید وردپرس شما دارای پرونده‌های متنوعی میباشد. برخی از این پرونده‌ها الگو نامیده می‌شوند و نمایش محدوده خاصی از وب‌سایت شما را کنترل میکنند.
یکی از این الگوهایی که گفته شد front-page.php نام دارد. اگر قالبی که بر روی سایت خود استفاده میکنید این الگو را داشته باشد وردرس بهصورت خودکار از این الگو برای نمایش صفحه اصلی شما استفاده میکنند. البته اگر قالب سایتتان این فایل را ندارد میتوانید برای سایت خودتان طبق روند زیر آن را ایجاد کنید.
خب برای ساخت این الگو باید در وهله اول یک پوشه خالی با اسم front-page.php بسازید. پس‌ازآن باید آن را در پوشه موضوع فعلی خود در حساب میزبانی وردپرس خود با استفاده از FTP بارگذاری کنید.
به‌محض اینکه شما این پوشه را بسازید وردپرس برای نمایش صفحه اصلی از آن استفاده می‌کند، اما خب این پوشه خالی است و ممکن است شما با یک صفحه کاملاً سفید بهعنوان صفحه اصلی مواجه شوید. اما خب این مشکل نیز قابل‌حل میباشد. برای رفع این مشکل شما باید از کد HTML برای نمایش محتوای صفحه اصلی استفاده کنید.
کدی که در زیر برای شما قرار دادهایم ضمن اینکه هدر و نویگیشن شما را حفظ می‌کند، محتوا و نوارهای جانبی را حذف می‌کند.
<?php /*
This page is used to display the static frontpage.
*/
// Fetch theme header template
get_header(); ?>
<div id="primary" <?php astra_primary_class(); ?>>
<div class="custom-homepage-container">
You custom homepage code goes here
</div>
</div><!-- #primary -->
//Fetch the theme footer template
<?php get_footer(); ?>همانطور که در ابتدای مقاله گفته شد صفحه اصلی یکی از مهم‌ترین و تاثیرگذارترین صفحات سایت شما به‌حساب می‌آید. که کاربر با دیدن این صفحه می‌تواند یک پیش‌زمینه نسب به شما و کسب‌وکارتان به‌دست بیاورد.
به همین دلیل است که شما باید دقت زیادی در طراحی این صفحه داشته باشید و تا حد ممکن سعی کنید این صفحه را مطابق با سلیقه کاربران خود طراحی کنید. بهعنوان مثال اگر می‌دانید که کاربران شما ظاهر ساده را می‌پسندند پس سعی کنید یک ظاهر ساده و درعین‌حال شیک و حرفهای برای سایت خود طراحی کنید.
فراموش نکنید که یکی از عوامل اصلی جذب کاربر رابط کاربری آسان است. مسلماً شما در جریان هستید که حجم بالایی از کاربران برای ورود به سایت‌های مختلف از تلفن‌های همراه استفاده میکنند. ازاین‌رو اگر کاربر بتواند تنها با یک کلیک با شما ارتباط پیدا کند اعتماد بیشتری نسبت به سایت شما خواهد داشت. به همین دلیل به شما پیشنهاد میکنیم به صفحه اصلی خود یک دکمه تماس تلفنی اضافه کنید. بنابراین حتماً مقاله‌ی آموزش افزودن دکمه تماس تلفنی به سایت وردپرسی را مشاهده کنید.
مورد دیگری که باید در خصوص صفحه اصلی سایت خود بررسی کنید نحوه عملکرد آن است. یکی از بهترین ابزارهایی که با استفاده از آن قادر خواهید بود عملکرد سایت خود را بسنجید Google Analytics میباشد. این ابزار برای سایت شما کارایی بسیار زیادی خواهد داشت، درواقع کار اصلی Google Analytics این است که شما را از عملکرد کاربرانتان با خبر می‌کند. برای شناخت بیشتر آن میتوانید از آموزش گوگل آنالیتیکس استفاده کنید.
و در آخر به این نکته دقت داشته باشید که صفحه اول شما باید بیانگر هدفی باشد که دارید در این سایت دنبال میکنید. تمامی اجزا و عناصری که طراحی میکنید باید در همین راستا باشند. پس اولین گامی که باید بردارید این است که یک هدف برای سایت خود در نظر بگیرید و قدم‌های بعدی را برای رسیدن به این هدف بردارید.
هدفی که در بالا در مورد آن بحث شد تقریباً در تمامی سایت‌ها تبدیل مشتریان بالقوه به بالفعل میباشد. برای رسیدن به این هدف باید از ابزارهای مختلفی استفاده کنید.
امیدواریم با استفاده از این مقاله توانسته باشید یک صفحه اول جذاب و حرفهای برای خود طراحی کنید. موفق و پیروز باشید. 🙂
راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.
[ad_2]
لینک منبع مطلب
قالب universal نسخه ۲ برای دیتالایف انجین انگلیسی ۹٫۴
[ad_1]
قالب universal نسخه ۲ برای دیتالایف انجین انگلیسی ۹٫۴
—————–
» دانلود قالب universal نسخه ۲ برای دیتالایف انجین انگلیسی ۹٫۴
» منبع : freescript.ir
نوشته قالب universal نسخه ۲ برای دیتالایف انجین انگلیسی ۹٫۴ اولین بار در پدیدار شد.
[ad_2]
لینک منبع مطلب
افزونه ویرایش فیلدهای صفحه تسویه حساب Easy Checkout Field Editor ووکامرس نسخه ۱٫۸٫۲
[ad_1]
Woocommerce Easy Checkout Field Editor نام افزونه کاربردی و حرفه ای ووکامرس میباشد که به وسیله آن میتوانید فیلدهای صفحه تسویه حساب ووکامرس را به آسانی ویرایش کنید. این افزونه به شما این امکان را خواهد داد تا بتوانید به آسانی و با کشیدن و رها کردن فیلدها، صفحه تسویه حساب ووکامرس را ویرایش کنید. از جمله امکانات این افزونه امکان ویرایش و یا حذف فیلدهای پیش فرض صفحه تسویه حساب می باشد که به آسانی میتوانید فیلدهای این صفحه مدیریت کنید.
افزونه ویرایش فیلدهای صفحه تسویه حساب Easy Checkout Field Editor دارای فیلدهای مختلفی مانند: متنی ، پاراگراف، رمز عبور، چند گزینه ای، دیت پیکر ، انواع دکمه های رادیویی و چک باکس و عددی میباشد. پس از ویرایش و افزودن فیلدهای دلخواه میتوانید یک پیش نمایش زنده از فیلدهای صفحه تسویه حساب مشاهده کرده و تغییرات لازم را اعمال کنید. همچنین این افزونه دارای امکان کاربردی میباشد که به وسیله آن میتوانید برخی فیلدها را تنها با موجود بودن یک محصول خاص در سبد خرید ، فعال کنید. در ادامه میتوانید ویژگی های دیگر این افزونه را مطالعه کنید.
نوشته افزونه ویرایش فیلدهای صفحه تسویه حساب Easy Checkout Field Editor ووکامرس نسخه ۱٫۸٫۲ اولین بار در دلکد – دانلود اسکریپت. پدیدار شد.
[ad_2]
لینک منبع مطلب
IP.Board نسخه ۳٫۳٫۰ بتا ۳
[ad_1]
IP.Board نسخه ۳٫۳٫۰ بتا ۳
—————–
» دانلود IP.Board نسخه ۳٫۳٫۰ بتا ۳
» منبع : freescript.ir
IP.Board نسخه ۳٫۳٫۰ بتا ۳
نوشته IP.Board نسخه ۳٫۳٫۰ بتا ۳ اولین بار در پدیدار شد.
[ad_2]
لینک منبع مطلب
پوسته پارسی وردپرس Tiara
[ad_1]
پوسته پارسی وردپرس Tiara که توسط گروه rooeen رویین فارسی سازی شده است.
با هم یک پوسته تجاری وردپرس کاملاً فارسی و با استفاده ای آسان را به شما تقدیم میکنیم. این پوسته برای سایت های تجاری و شرکتی مناسب میباشد و افکت های جی کوئری زیبایی دارد و از یک اسلایدر نیز بهره میبرد
از ویژگی های این پوسته میتوان به:
—————–
» دانلود پوسته پارسی وردپرس Tiara
» فارسی سازی و ویرایش (گروه رویین)
» منبع : freescript.ir
نوشته پوسته پارسی وردپرس Tiara اولین بار در پدیدار شد.
[ad_2]
لینک منبع مطلب
کاربران سایت ما را با چه مرورگر‌هایی باز میکنند؟ تست سایت با مرورگر‌های مختلف
[ad_1]
سلام و درود بر شما بیست اسکریپتی های دوست داشتنی. در روزگاری نه چندان دور، مرورگر‌های مختلف مثل خوره به جان وبمستر‌ها افتاده بودند. خوشبختانه به ارائه Microsoft edge و نسخه‌های جدید کروم و فایرفاکس این مشکل تا حدودی برطرف شد. اما باز هم بهتر است ببینید کاربران شما با چه مرورگر‌هایی بیشتر سایت شما را باز میکنند. سپس سایتتان را با مرورگر‌های مختلف تست کنید.
مشخص هست که مرورگر‌هایی مثل فایرفاکس یا کروم بیشترین استفاده را بین عموم مردم دارند اما فرمول خاصی برای اینکه بگوییم میزان استفاده از هر مرورگر روی سایت شما چقدر است نداریم. کاملا مشخص است که بسته به زمینه فعالیت سایت شما، کاربران شما با مرورگر‌های مختلفی وارد سایتتان می‌شوند.
مثلا ممکن است سایت شما در زمینه طراحی سایت فعالیت داشته باشد. مسلما اکثر افراد با گوگل کروم سایت شما را باز میکنند. حالا فرض کنیم زمینه فعالیت شما فروش لوازم یدکی خودروی تویوتا fg45 هست. :) شکی نیست که کاربران سایت شما پیرمرد‌هایی خواهند بود که با اینترنت اکسپلورر سایتتان را مشاهده میکنند.
هر مسئله، پاسخی دارد. در نتیجه باید به دنبال یک راه کاملا اصولی برای مشاهده مرورگر کاربران باشیم. بهترین روش برای اینکار استفاده از سیستم‌های آمارگیری هست و چه چیزی بهتر از گوگل آنالیتیکس برای اینکار!
همانطور که بصورت کامل در آموزش گوگل آنالیتیکس توضیح دادم، میتوانید از منوی Audience و زیر شاخه Technology بخش Browser & OS را کلیک کنید.
در این بخش اطلاعات کاملی درباره مرورگر‌های قابل استفاده کاربران سایتتان نمایش داده خواهد شد.
حالا مشخص می‌شود که کاربران شما دارای دانش فنی هستند (از کروم و فایرفاکس استفاده میکنند.) یا افرادی هستند که دانش چندانی در زمینه کامپیوتر ندارند!
برای تست سایتتان با مرورگر‌های مختلفی از جمله Edge, FireFox, Google Chrome و Opera وارد سایت CrossBrowser Testing شوید. این سرویس، سایت شما را با مرورگر‌های مختلف تست خواهد کرد. ابتدا وارد این سایت شوید. سپس روی Start a Free Trial کلیک کنید تا بتوانید از نسخه رایگان آن استفاده کنید
در فرمی که به شما نمایش داده می‌شود، اطلاعات خود را وارد کنید و روی CREATE YOUR FREE ACCOUNT کلیک کنید.
یک کد تایید به ایمیل شما ارسال میشه. این کد را در فرم تایید وارد کنید تا حساب شما فعال شود.
حالا به پنل تست مرورگرها وارد شدید. از منوی Test Center روی Run Live Test کلیک کنید.
حالا آدرس سایتتون رو وارد کنید و نوع سیستم و مرورگری که می‌خواید سایت شما با اون تست بشه رو انتخاب کنید.
موفق باشید.
نوشته کاربران سایت ما را با چه مرورگر‌هایی باز میکنند؟ تست سایت با مرورگر‌های مختلف اولین بار در بیست اسکریپت. پدیدار شد.
[ad_2]
لینک منبع مطلب
قالب Playkino برای دیتالایف انجین انگلیسی ۹٫۴
[ad_1]
قالب Playkino برای دیتالایف انجین انگلیسی ۹٫۴ مناسب سایت های movie
—————–
» دانلود قالب Playkino برای دیتالایف انجین انگلیسی ۹٫۴
» منبع : freescript.ir
نوشته قالب Playkino برای دیتالایف انجین انگلیسی ۹٫۴ اولین بار در پدیدار شد.
[ad_2]
لینک منبع مطلب
افزودن ابزارک تب بندی jQuery به وردپرس
[ad_1]
با تب جی کوئری می توانید چندین بخش مختلف از قالب سایتتان را همزمان مشاهده نمایید و همچنین اجازه صرفه جویی در فضا روی صفحه نمایش کاربران با ترکیب ویدجت های مختلف در یک ابزارک را میدهد. هدف از این مقاله آموزش نحوه ی افزودن تب jQuery به وردپرس (بدون کد نویسی) میباشد.
هنگامی که در حال اجرای یک وب سایت وردپرس هستید شما به راحتی می توانید مواردی را به ستون های فرعی خود با استفاده از کشیدن و رها کردن ویدجت اضافه کنید. هنگام رشد سایت شما ممکن است احساس کنید در نوار کناری فضای کافی برای نشان دادن تمام مطالب مفید ندارید. این دقیقا همان زمانی است که ساخت یک تب دستی بکار شما می آید.
تب بندی به شما اجازه میدهد که آیتم های مختلف را در یک ناحیه نشان دهید. کاربران میتوانند روی هر تب کلیک کرده و محتوای مورد علاقه ی خود را ببینند. بسیاری از سایت ها برای دیدن مقاله محبوب امروز و این هفته و حتی این ماه ازاین روش استفاده میکنند. در این آموزش ما به شما نحوه ی ایجاد یک ویدجت تب بندی را آموزش میدهیم. اما نشان نمیدهیم که چه چیزی به تب اضافه کنید, میتوانید هر چیزی مایلید اضافه کنید.
نکته: این آموزش برای کاربران سطح متوسط است و به دانش HTML و CSS نیاز است.
اولین کاری که باید انجام دهید ایجاد یک فولدر به نام bistscript-tabber-widget روی دسکتاپ میباشد. پس از آن فایل درون این فایل با استفاده از ویرایشگر متنی ساده مانند Notepad ایجاد کنید. هدف از اولین فایل ایجاد bistsc-tabber-widget.php است که شامل کد HTML و PHP برای ایجاد تب و ویدجت سفارشی وردپرس میباشد.
فایل دوم یک bistsc-tabber-style.css است که شامل کد css برای تب ها میباشد. سومین فایل ایجاد یک bistsc-tabber.js است که شامل اسکریپت jQuery برای راه گزینی تب و افزودن انیمیشن میباشد.
ابتدا با فایل bistsc-tabber-widget.php شروع میکنیم,هدف از این فایل ایجاد یک افزونه برای ثبت نام ویدجت میباشد. اگر اولین باری است که ویدجت وردپرس ایجاد میکنید توصیه میکنیم کد زیر را در فایل bistsc-tabber-widget.php اضافه کنید.
<?php
/* Plugin Name: 20script jQuery Tabber Widget
Plugin URI: http://www.20script.ir
Description: A simple jquery tabber widget.
Version: 1.0
Author: 20script
Author URI: http://www.20script.ir
License: GPL2
*/
// creating a widget
class WPBTabberWidget extends WP_Widget {
function WPBTabberWidget() {
$widget_ops = array(
'classname' => 'WPBTabberWidget',
'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
'WPBTabberWidget',
'WPBeginner Tabber Widget',
$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output
function wpb_tabber() {
// Now we enqueue our stylesheet and jQuery script
wp_register_style('wpb-tabber-style', plugins_url('bistsc-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('wpb-tabber-style');
wp_enqueue_script('wpb-tabber-widget-js');
// Creating tabs you will be adding you own code inside each tab
?>
<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<?php
// Enter code for tab 1 here.
?>
</div>
<div id="tab2" class="tab_content" style="display:none;">
<?php
// Enter code for tab 2 here.
?>
</div>
<div id="tab3" class="tab_content" style="display:none;">
<?php
// Enter code for tab 3 here.
?>
</div>
</div>
<div class="tab-clear"></div>
<?php
}
extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget;
$tabs = wpb_tabber();
// output tabs HTML
echo $tabs;
// post-widget code from theme
echo $after_widget;
}
}
// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>
در کد بالا ابتدا یک افزونه ایجاد میکنیم و سپس در افزونه یک ویدجت ایجاد میکنیم. در بخش خروجی ویدجت سی اس اس و جاوا اسکریپت اضافه میکنیم سپس یک خروجی HTML برای تب ها ایجاد میکنیم. در انتها ویدجت را ثبت نام میکنیم. باید محتوایی که میخواهید در هر تب ببینید را اضافه کنید.
اکنون نیاز است یک ویدجت با کد های PHP و HTML برای تب ها ایجاد کنیم و در گام بعدی برای نمایش آنها بعنوان تب jQuery اضافه کنیم. برای این کار کد زیر را به فایل wp-tabber.js اضافه کنید.
(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);
اکنون ویدجت همراه با jQuery آماده است,گام بعدی افزودن یک ظاهر طراحی شده به تب میباشد. شیوه ی زیر را به فایل wpb-tabber-style.css اضافه کنید.
ul.tabs {
position: relative;
z-index: 1000;
float: left;
border-left: 1px solid #C3D4EA;
}
ul.tabs li {
position: relative;
overflow: hidden;
height: 26px;
float: left;
margin: 0;
padding: 0;
line-height: 26px;
background-color: #99B2B7;
border: 1px solid #C3D4EA;
border-left: none;
}
ul.tabs li a{
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
background-color: #D5DED9;
border-bottom: 1px solid #D5DED9;
}
.widget-area .widget .tabs a {
color: #FFFFFF;
}
.tab_container {
position: relative;
top: -1px;
z-index: 999;
width: 100%;
float: left;
font-size: 11px;
background-color: #D5DED9;
border: 1px solid #C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul {
margin: 0;
padding: 0;
list-style: none;
}
.tab_content li {
margin: 3px 0;
}
.tab-clear {
clear:both;
}
اکنون فولدر bistsc-tabber-widget را در دایرکتوری سایت /wp-content/plugins/ آپلود کرده و همچنین میتوانید فولدر را به فایلهای فشرده ی زیپ اضافه کنید و به افزونه ها>افزودن در بخش مدیریت بروید و روی تب upload برای نصب افزونه کلیک کنید. پس از فعال شدن افزونه به نمایش>ویدجت بروید و ویدجت تب بندی را به نوار کناری اضافه کنید.
موفق باشید
نوشته افزودن ابزارک تب بندی jQuery به وردپرس اولین بار در بیست اسکریپت. پدیدار شد.
[ad_2]
لینک منبع مطلب