Naghies

این آموزش خیلی شبیه به آموزش دکمه ی حذف نوشته با استفاده از jQuery است (توصیه میکنم بخونید) و در این آموزش در واقع ما داریم از ویژگی های دیگه ی این فریم ورک (فارسیش چی میشه؟) استفاده میکنیم تا دکمه ای ایجاد کنیم که فضایی ایجاد کنه که به حالت کشویی باز و بسته بشه. داخل این کشو هر چیزی رو میشه قرار داد. شما میتونید هر تکه از کد ها رو داخل این کشو قرار بدید و در فضای موجود در پوسته تون صرفه جویی کنید. از تعداد دیدگاه ها ، دکمه هایی برای فرستادن نوشته به بالاترین ، خوشمزه و …

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

من میخوام توی منوی کشوییم چند تا دکمه ی دیگه قرار بدم که با فشردن اونها نوشته به سایت های مورد نظرم فرستاده بشه . شما بعد از انجام عملی این آموزش و یاد گرفتن کارهای گفته شده میتونید هر کد دیگری رو داخل این کشو قرار بدید. پس شروع میکنیم :

1_مثل آموزش قبل ابتدا فایل header.php پوسته رو باز میکنیم و این کد رو قبل از بسته شدن تگ head قرار میدیم.

که کل کدهای فایل header.php به این صورت میشه.

2_من یه سری عکس آماده کردم ، که آیکن سایت هایی است که قرار دکمه شون رو برازیم توی کشو ، اونها رو هم از اینجا بردارید و توی پوشه ی images بریزید.

3_من یه دکمه هم برای دکمه ی منو مون طراحی کردم ، زیبا نیست اما از هیچی بهتره ، حتماً شما میتونید بهتر از این رو طراحی کنید ، اون رو از اینجا بگیرید و توی پوشه ی images قرار بدید .

4_ما چون میخوایم این منوی کشویی برای همه ی نوشته ها ظاهر بشه پس باید کدمون رو توی لوپ وردپرس قرار بدیم. برای این کار ، این کد رو که مربوط به دکمه های اشتراک گذاری و دکمه ی خود کشو هست رو یه جایی داخل لوپ وردپرس قرار میدیم ، به نظر من جایی در کنار عنوان نوشته میتونه جای خوبی باشه ، نگران نباشید بعداً میشه با CSS کار ها رو کمی ترو تمیز کرد.خیلی راحت فایل index.php رو باز میکنید و کد رو هر جایی دوست دارید توی لوپ وردپرس قرار میدید. نتیجه ی کار من شد این. و در نهایت بعد از اضافه کردن کلاس post-wrap قبل از شروع عنوان و تا پایان کد مربوط به نوشته ، همون طور که در آموزش قبل توضیح دادم ، کد نهایی مربوط به index.php من به این صورت شد.
همچنین فایل single.php رو باز کنید و این کد رو بعد از کد مربوط به عنوان نوشته یا هر جایی دوست دارید قرار بدید. کد نهایی فایل single.php من اینجوری شد. دقت کنید که من برای مشخص شدن نوشته ام از کلاس widecolumn که در خود فایل single.php موجوده استفاده کردم.

5_یک سری کد جاوا هست که شامل افکت ها و فریم ورک jQuery است ، اونها رو هم از اینجا بردارید و در پوشه ای با نام js در کنار پوشه ی images قرار بدید.

6_حالا یه کمی با CSS به چیزی که میخوایم نزدیک تر میشیم. این کد ها رو در انتهای فایل style.css پوسته قرار میدیم . توضیح اینکه ما میایم با استفاده از کلاس share-div جعبه ای تعریف میکنیم و با CSS دستور میدیم که این جعبه رو نمایش نده. بعدش برای دکمه ی مورد نظرمون که با کلاس share تو کدها شناخته میشه با جاوا تعریف میکنیم که بعد از کلیک ، این جعبه رو با یک افکت کشویی نمایش بده.همچنین با کلاس share که در داخل فایل style.css هست میتونیم با عوض کردن مقدار visibility به visible یا hidden تعریف کنیم که دکمه ی share ما نمایش داده بشه یا نه. کلاس post-wrap هم که مثل آموزش قبل کارش مشخص کردن هر نوشته است در واقع کد جاوای ما با این کلاس هر نوشته رو میشناسه. پس دقت کنید که در کد های CSS داده شده پهنا ها را (width) درست تنظیم کنید . همچنین دقت کنید که مقدار ارتفاع (height) در کلاس share-div مقدار ارتفاع جعبه ی شما را تعیین میکند .

خب کار تمام شد…الان شما میتونید یه دکمه ای بسازید که با فشردنش یک منوی کشویی از ناکجا آباد ظاهر میشه…و مشتونید هر چیزی دوست دارید رو توش بزارید.

کلیه ی فایل های مورد نیاز :

آیکن سایت ها
فایل های جاوا
فایل تصویری دکمه ی share
فایل های مربوط به پوسته ی کار شده