آموزش وردپرس

ساخت بنر گوشه سایت بدون افزونه1 min read

آموزش وردپرس

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

همچنان که میدانید برای هر کاری در .ردپرس از افزونه استفاده نکنید و سعی کنید از کدنویسی و راه های دیگر استفاده کنید زیرا سرعت سایت وردپرسی شمما بشدت افت میکند.

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

ما اول یک بنر گوشه سایت میسازیم که در همه دستگاه ها نشان داده بشود و بعد با اضافه کردن یک دستور خیلی ساده css میایم و اون بنر گوشه ای رو محدود میکنیم به دستگاه های موبایل ، که اینکار با تنظیم رزولوشن انجام میشه.

ساخت بنر گوشه سایت

قدم اول: آپلود عکس بنر

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

همان طور که توی عکس زیر میبینید ما بنرمون رو آپلود کردیم و لینک آن را هم کپی کردیم.

ساخت بنر گوشه سایت

قدم دوم: تعیین لینک مقصد

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

ساخت بنر گوشه سایت

قدم سوم: نوشتن کد HTML

توی این قسمت من کد های لازم رو برای شما نوشتم. شما به راحتی میتونید با کم و زیاد کردن عددها به سایز و مکان مورد نیاز خود برسید.

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

position:fixedچیست؟ این قسمت را نباید تغییر دهید. چون به مرورگر میگوید که قرار است موقعیت المان ما ثابت باشد و با اسکرول قابل تغییر نیست.

z-index:100 چیست؟ در حالت عادی این مقدار برای همه المان ها برابر عدد ۱ است. که ما اینجا آن را برابر ۱۰۰ قرار دادیم تا روی تمام المان های دیگر قرار بگیرد. جالب است بدانید اگر مقدار آن را منفی کنید دیگر بنر شما دیده نخواهد شد.

left:0px چیست؟ این گزینه می گوید که فاصله المان از سمپ چپ مرورگر باید برابر ۰ باشد ، یعنی به سمت چپ مرورگر بچسبد.

bottom: 0px چیست؟ این گزینه هم مانند بالا می گوید که فاصله این بنر از پایین برابر صفر باشد ، یعنی به پایین بچسبد.

href چیست؟ شما در این قسمت لینک مقصد خودتان را باید قرار دهید. در این مثال فرض شد که لینک مقصد شما، تلگرام شما است. پس این لینک را که در قدم دوم برداشته بودیم را استفاده میکنیم.

target=”_blank” چیست؟ این قسمت اختیاری است و شما نیز میتوانید آن را بردارید. کار این کد این است که وقتی شما روی عکس کلیک میکنید لینک مقصد شما در یک صفحه یا tab جدید باز شود.

تا اینجا کد ها مربوط به موقعیت قرار گیری بنر و وضعیت لینک خروجی را چک کردیم.

حالا میخواهیم تنظیمات عکس را انجام دهیم.

src چیست؟ این قسمت ما لینک عکس یا بنرمان را باید داخل ” ” کپی کنیم. این لینک را در قدم اول به دست آوردیم.

alt چیست؟ این قسمت الزامی نیست اما برای موتور های جست و جو میتواند مفید باشد. توضیحی مختصر راجع به عکس باید بنویسید.

height:100px چیست؟ این قسمت ارتفاع عکس ما را مشخص می کند. میتوانید بسته به عکس خود این عدد را تغییر دهید.

width:100px چیست؟ این قسمت هم طول عکس ها را نشان میدهد.میتوانید بسته به عکس خود این عدد را تغییر دهید.

تنظیم برای نمایش فقط در موبایل

برای اینکه بنر ما فقط در موبایل نشان دهده شود کد زیر را در قسمت css سفارشی تنظیمات قالبتان کپی کنید. ما در کد زیر تنظیم کرده ایم که اگر دستگاهی دارای رزولوشن بیش از ۶۰۰ پیکسل بود ، بنر نشان داده نشود. شما میتوانید این عدد را کم یا زیاد کنید.

قدم چهارم: کپی کردن کد

برای این قدم چند روش مختلف وجود دارد. روش اول که از همه راحت تر است اینه که شما بیاید و این کد را در تنظیمات قالب و در قسمت html code ذخیره کنید. مانند عکس زیر.

ساخت بنر گوشه سایت

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

آموزش وردپرس

رفع مشکل، نبود Custom HTML در سایت

اگر قالب شما این امکان را نداشته باشد باید از افزونه Insert Headers and Footers استفاده کنید تا کد های html را در قسمت فوتر سایتتان اضافه کنید. نکته مهم این است که اگر از این افزونه استفاده کردید فقط کد های html را باید کپی کنید و نه کد های css.

نکته بعدی هم این است که کدهای html را فقط و فقط در قسمت فوتر قالب کپی کنید تا بالای تگ body قرار بگیرند. برای این منظور باید از قسمت نمایش » ویرایشگر استفاده کنید.

آموزش ساخت بنر گوشه سایت بدون افزونه تمام شد و تا آموزش های بعدی خدا نگهدار.

ساخت بنر گوشه سایت بدون افزونه
  • بدون افزونه
  • نوشتن کد HTML
  • نوشتن کد css
  • رفع مشکل، نبود Custom HTML در سایت
5

یک دیدگاه

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