ساخت تابلو اعلانات با کمک جی کوئری

دسته‌ها : آموزش, وردپرس علی میرزائی 49 دیدگاه‌ها

آموزش ساخت تابلوی اعلانات با کمک جی کوئری

سلام.
چند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید.
و امروز هم آموزش ساختش رو با کمک css و جی کوئری براتون آماده کردم، پس همراه ما باشید…

اولین قدم کار اینه که به header.php قالبتون برید و قطعه کد زیر رو، درست پایین تگ <body> قرار بدید.
این کد چارچوب اصلی تابلو اعلانات ماست، به عبارت دیگه پی کار برنامست و با وجودش طرح کلی، متن و تصویر دکمه های باز و بسته رو شکل میده.

<!-- notification bar -->
	<div class="note-bar">
				<p>سلام این یک متن آزمایشی است، در اینجا می توانید اطلاعیه ها و اخبار سایت خود را قرار بدهید.</p>
		<a href="#" id="hidebar" class="close">
            <img src="<?php bloginfo('template_directory'); ?>/icon-close.png">
		</a>
	</div>

	<!-- Button to open notification bar -->
	<div class="open-button">		
		<a href="#" id="showbar">
			<img src="<?php bloginfo('template_directory'); ?>/icon-open.png" >
		</a>
	</div>

 

بعد از پی ریزی، نوبت به قالب بندی و زیبا سازی می رسه، پس به style.css قالبتون مراجعه کنید و کد پایین رو در آخر کدهای موجود قرار بدید.

/*------- Notification Bar-----*/
.note-bar{
	display:none;
	overflow: hidden;
	background: rgba(255, 88, 61, 0.4);
	height: 38px;
	border-bottom: 4px solid #fff;
	padding-right:30px;

}

.note-bar p {
	color: #FFFFFF;
	float: right;
	font-size: 12px;
	line-height: 36px;
	margin: 0 0 0 10px;
	padding: 0;
	text-shadow: none;

}

.close{
	margin: 8px 10px 0 0;
	margin-left:40px;
	float: left;
}

.open-button {
	padding-top: 10px;
	width: 30px;
	height:30px;
	background: rgba(255, 88, 61, 0.4);
	border: 4px solid #fff;
	border-top: 0px;
	position: fixed;
	top: 0;
	left: 30px;
	display: none;	
}
.open-button #showbar{
margin:0 5px;	
}

خوب، کارهای مربوط به قالب بندی تابلو اعلانات تموم شده ،البته الان هیچ چیز قابل مشاهده نیست، به همین خاطر باید به سراغ جی کوئری بریم.

جی کوئری در واقع کتابخونه ای از توابع  پیش ساخته ی جاوا اسکریپته و کاربردهای مختلفی رو داره. مثلا در بحث های مربوط به آی جکس و…

در اینجا هم ما به کمک جی کوئری میتونیم یک حالت انیمیشن زیبا رو به برناممون بدیم.

پس به دوباره به header قالبمون بر می گردیم و با گذاشتن کد زیر در اونجا، کتابخونه جی کوئری رو در قالبمون قرارمی دیم. (این کد رو میتونید در بالای </head> قرار بدید)

– نکته : اگه در قالب فعلیتون کتابخونه جی کوئری وجود داره دیگه نیازی به قرار دادن این کد ندارید.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

حالا میتونیم کار با جی کوئری رو آغاز کنیم:

ابتدا کد زیر رو که فرم کلی فراخوانی توابع جی کوئری هست رو مینویسیم.

<script type="text/javascript">
  $(document).ready(function(){
 محل قرار گیری کدها
  });
</script>

سپس کد زیر رو در زیر رو در جای مشخص شده قرار بدید.
این کد با فراخوانی تابع slideDown  و پاس دادن کلاسnote-bar بهش، با یک سرعت قابل تنظیم، محتویات این کلاس رو به صورت انیمیشن پایین رونده در بالای سایت به نمایش در میاره.

$(".note-bar").slideDown(300);

در ادامه هم کد زیر رو بهش اضافه میکنیم تا وقتی بر روی آیکون ضربدر کلیک کردیم، باکس فعلی بسته شه و محتویات کلاس open-button به نمایش در بیاد.

$("#hidebar").click(function(){
    $(".note-bar").slideUp(300, function(){
        $(".open-button").slideDown(300);
    });
    return false;
});

در آخر هم با اضافه کردن کد زیر کار رو به اتمام میرسونیم (عملکرد این کد هم شبیه کد بالاست)

$("#showbar").click(function(){             
    $(".open-button").slideUp(300, function(){
        $(".note-bar").slideDown(300);
    });
    return false;
});

کد زیر هم نتیجه ی کامل شده ی کدهای بالاست:

<script>
    $(document).ready(function(){            

        $(".note-bar").slideDown(300);  

        $("#hidebar").click(function(){
            $(".note-bar").slideUp(300, function(){
                $(".open-button").slideDown(300);
            });
            return false;
        }); 

        $("#showbar").click(function(){             
            $(".open-button").slideUp(300, function(){
                $(".note-bar").slideDown(300);
            });
            return false;
        });     

    });
</script>

 

امیدوارم که توضیحات مفید بوده باشه…
تا درودی دیگر، بدرود…
منبع اصلی : gazpo.com

دیدگاه کاربران در مورد این نوشته

  1. سلام من ازاینجا به بعدشو نفهمیدم که کدشو باید کجا بذاریم:
    حالا میتونیم کار با جی کوئری رو آغاز کنیم:
    ممنون میشم راهنمایی کنید

    توسط abolfazl پاسخ

    1. سلام،
      میتونید کدهای اسکریپت رو در header یا footer به کار ببرید.
      البته به دلایل سئو و افزایش سرعت بارگذاری، پیشنهاد میشه که کدهای جاوااسکریپت در فوتر قرار داده بشن.
      موفق باشید.

      توسط علی میرزائی پاسخ

  2. سلام آقای میرزایی٬ وقتتون بخیر. میخواستم بپرسم چطور میتونم گزینه لایک مطالب دقیقا مثل سایتتون داشته باشم؟
    ممنون

    توسط سعید پاسخ

    1. سلام، ممنون.
      من از افزونه ی i like this استفاده کردم.
      پیشتر این افزونه در سایت معرفی شده، به لینک زیر مراجعه کنید:
      http://tiny.alimir.ir/q

      توسط علی میرزائی پاسخ

  3. با سلام
    من کد هایی را که فرمودید در سایتم قرار دادم ولی فقط به صورت یک خط متن ساده نمایش داده میشه اشکال از کجاست؟ کد های style را هم قرار داد ام

    توسط kosar پاسخ

    1. اینطوری گفتنش سخته! باید یه اسکرین شات یا دموی آنلاین ببینم تا بتونم نظر بدم.

      توسط علی میرزائی پاسخ

  4. شرمنده
    یه مشکل دیگه وجود داره
    اونم اینکه من فقط با کروم میتونم حالت افکت دار این نوتیفیکیشن رو ببینم
    در فایرفاکس و اینترنت اکسپلورر ساده و بدون قالب میاد
    دلیلش چیه؟

    توسط سعید پاسخ

  5. جسارتا یه سوال دیگه
    چطور میتونم فونت پیامو عوض کنم
    مثلا یکان بذارم؟

    توسط سعید پاسخ

    1. اگه فرضا فونت بی یکان در قالبتون آپ باشه، و در Body به عنوان فونت پیش فرض انتخابش کنید، برای اون هم جواب میده.
      اما اگه تنها این فونت رو برای تابلو میخواید میتونید در note-bar p با دستور font-family این فونت رو براش انتخاب کنید.

      توسط علی میرزائی پاسخ

  6. ممنونم
    مشکل حل شد

    توسط سعید پاسخ

  7. ممنونم از جواب دهیتون
    این عکس ها رو دقیقا کجا باید آپلود کنم
    در ضمن مشکلش حل شد فقط عکسها لود نمیشن
    من تو پوشه ی آپلود هاست آپلود کردم و آدرس کامل اونو به جای آدرس قبلی جایگزین کردم بازم عکسو نشون نمیده
    باید تو پوشه ی دیگه ای آپلود کنم؟
    میشه دقیقا توضیح بدید؟

    توسط سعید پاسخ

    1. خواهش میشود، کاری نکردم که!
      هیچ فرقی نمیکنه که تصویر رو کجا آپلود کنی، مهم آدرس دهیه.
      فرضا میتونی این عکس رو در پوشه images قالبت آپ کنی و سپس به این صورت بهش آدرس بدی:
      < img src="لینک تصویر" >

      توسط علی میرزائی پاسخ

  8. متوجه نشدم
    من اون کد نتیجه رو دقیقا بعد از کد

    گذاشتم تو فایل هدر ولی هیچی نشون داده نمیشه جز متن نوتیفیکیشن
    خواهش میکنم اگه همه جزئیات بالا هست بازم راهنماییم کنید
    توضیحات رو کامل خوندم ولی چیزی دستگیرم نشد
    ممنون میشم

    توسط سعید پاسخ

    1. الان سایتت رو دیدم، فک نکنم مشکل از کدهای جی کوئری باشه!!!
      یه قسمتی که اصلا آیکون ها در سایتت بارگذاری نشدن! ابتدا تصویر اون آیکون ها رو از دمو خارج کن و پس از بارگذاری در سایت، تو اون کد اولی که معرفی کردم به جای آدرس قبلی آدرس جدید رو جایگزین کن.
      در ادامه هم فک کنم یه مقدار کدهای سی اس اس با قالبت سازگاری ندارن!!!
      شما اون کار اول رو انجام بده، سپس یه یوزر درست کن و به ایمیلم بفرست تا بررسیش کنم.

      توسط علی میرزائی پاسخ

  9. سلام
    بنده همه راههایی که گفتید قدم به قدم رفتم
    فقط اون قسمت آخر که گفتید”کد زیر هم نتیجه ی کامل شده ی کدهای بالاست”نمیدونم این کدها رو دقیقا باید کجا و تو کدوم فایل قالب بذارم
    ممنون میشم راهنمایی کنید
    باتشکر

    توسط سعید پاسخ

    1. سلام،
      در خطوط بالا کدها رو توضیح داده بودم و در خط آخر هم همه ی کدها رو کنار هم قرار دادم، در کل چیز متفاوتی نبوده!
      محل قرارگیریش هم تو متن توضیح داده شده، لطفا مجددا به متن اصلی مراجعه کنید.

      توسط علی میرزائی پاسخ

  10. دیدگاهی برای بیان ندارم به جز تشکر ویژه که کارم رو راه انداخت.
    در صورت تمایل به همکاری در هر زمینه میتونید با میلم ارتباط برقرار کنید.
    بازدید روزانه سایت بنده 12 هزار نفر با IP یکتا.

    توسط سهیل پاسخ

  11. خیلی ممنون علی آقا .

    کارتون حرف نداره .

    فقط یه چیز دیگه میمونه ! اگه میشه آموزش حذف تولبار (ناوبار) مدیریت از صفحه ی اول سایت رو بگید .

    همون کادر مشکی که وقتی به پنل مدیریت وارد میشیم در صفحه ی اول سایت بالای سایت ظاهر میشه .

    ماله من وقتی وارد میشم در صفحه ی اول سایت به اندازه ی اون کادر جا خالی میشه اما کادری نشون نمیده . بنابراین میخوام حذف کنم .

    اگه میشه در یک پست توضیحش بدین .

    خیلی ممنون از سایت فوق العادتون :)

    توسط marjan پاسخ

    1. خواهش میکنم، لطف دارید.
      باشه، فردا یه سر بزنید، ایشالا آموزشش آمادست 😉

      توسط علی میرزائی پاسخ

  12. سلام .

    من میخوام که وقتی کاربری میاد داخل سایت ، اول اون کلید رو ببینه که وقتی روش کلیک میکنه اون پیغام نشون داده بشه .

    یعنی به صورت پیش فرض میخوام اول اون کلید برای باز شدن پیغام رو نشون بده .

    ولی در حال حاضر اول پیغام نشون میده سپس با کلیک روی × پیغام بسته میشه .

    منتظرم لطفا :)

    توسط marjan پاسخ

    1. سلام.
      خیلی راحته، کافیه تو دستور زیر (اولین کد جاوا اسکریپتی که توضیحش رو دادم) به جای note-bar از open-button استفاده کنید.
      $(".note-bar").slideDown(300);
      یعنی کد بالا رو به صورت زیر تغییر بدید.
      $(".open-button").slideDown(300);
      * توجه: این تغییر رو تنها باید در دستور اولی انجام بدید و به بقیه دستورهای مشابه کاری نداشته باشید.

      توسط علی میرزائی پاسخ

  13. سلام.یک اسکریپت بزودی برخواهیم گشت رو فارسی سازی کردم.
    لینکش:http://nanodl.netgig.ir/wp-content/uploads/2013/03/alissa-coming-soon.zip
    گفتم که اگه دوست داشتید بزارید تو سایتتون

    توسط محمدحسین پاسخ

    1. ممنون از لطفتون و زحمتی که کشیدید… :)
      مدتیه تو فکر احداث بخش پست مهمان هستم، در اون صورت میتونید خودتون با توضیحات دلخواه این افزونه رو در سایت ما منتشر کنید.
      اینطوری به نظرم بهتر خواهد بود 😉

      توسط علی میرزائی پاسخ

  14. سلام.ممنون

    توسط محمد حسین پاسخ

  15. بنر سایت شما یک ماه در سایت ما قرار گرفت

    توسط محمدحسین پاسخ

    1. ممنونم، لینک شما هم در برگه تبادل لینک ما قرار گرفت.
      پیروز باشید.

      توسط علی میرزائی پاسخ

  16. دوست عزیز اشکال دوم هم برطرف شد

    توسط محمد حسین پاسخ

    1. خوب پس خدا رو شکر :)

      توسط علی میرزائی پاسخ

  17. اشکال اول رو درست کردم ولی دومیه هنوز پابرجاست

    توسط محمد حسین پاسخ

  18. بله منضورم بک گراند هست
    هرچقدر کد رو تغییر میدم تابلو تغییر نمی کنه
    من میخوام رنگ بکگراند این باشه:244992
    که میزان رنگش به اینصورته:
    red:36
    green:73
    blue:146
    به این ترتیب کد باید به اینصورت باشه:
    background: rgba(36,73,146, 8);
    درسته؟
    ولی بک گراند تغییر نمیکنه؟
    راستی یک اشکال دیگر:
    مرورگر فایرفاکس اون عکس کناری رو نشون نمی ده و مرورگر کروم هم که نشون میده میگه عکسی موجود نیست و عکس پیش فرض خرابی لینک رو میزاره

    توسط محمد حسین پاسخ

  19. سلام چطور میتونم رنگ پس زمینه تابلو رو عوض کنم؟
    هرچی فایل سی اس اس رو ادیت میکنم فقط رنگ متن داخل تابلو عوض میشه

    توسط محمدحسین پاسخ

    1. سلام،
      اگه منظورتون رنگ صورتی بگ گرانده که کاری نداره، کافیه تو کدهای سی اس اس در بخش note-bar کد رنگ background رو به رنگی که می خواید تغییر بدید.

      توسط علی میرزائی پاسخ

  20. باتشکر از آموزش شما
    جالب وکاربردی بود.

    توسط محمدصادق عليخاني پاسخ

    1. خواهش میکنم، قابلی نداشت.

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید