وبلاگ wpdev آموزش توسعه وردپرس

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

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

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

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

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

خب یه دکمه ساده رو بیاین بسازیم.

معمولا برای اینکه بتونید یه دکمه ساده طراحی کنید به یه تگ a یه سری استایلها رو اختصاص میدید و با استفاده از اون یه دکمه طراحی میکنید.

مثلا یه دکمه برای دانلود میخوایم بسازیم.

<a nolink="#" class="btn-download">دانلود کنید!!</a>

حالا میخوایم این دکمه رو که با کلاس btn-download قرار ساخته بشه رو با css ایجاد کنیم.

.btn-download {
	box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
	background-color:#b8e356;
	border-radius:12px;
	border:1px solid #83c41a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:15px;
	font-weight:bold;
	padding:11px 35px;
	text-decoration:none;
	text-shadow:0px 1px 0px #86ae47;
}

خب به همین سادگی یه دکمه شیک با هم ساختیم. اما اگه دقت کرده باشید وقتی روی دکمه قرار میگیرید ممکنه رنگش عوض بشه یا یه اتفاقی بیفته. خب این حالت رو بهش میگن هاور موس(hover) . برای اینکه شما هم بتونید این حالت رو داشته باشید باید این مدلی کد رو تکمیل کنید.

.btn_download:hover {
background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
	background-color:#a5cc52;
}

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

یکی از سایتهای که به شما می تونه در این زمینه کمک کنه سایت bestcssbuttongenerator هست. شما با استفاده از این سایت به راحتی می تونید دکمه های کاربردی تولید کنید.

خب امیدوارم این مطلب به دردتون بخوره و بتونید ازش استفاده کنید. . نظرات یا سوالات خودتون رو ارسال کنید.

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

اضافه کردن جایگاه جدید منو در قالب وردپرس

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

با استفاده از این کد شما می تونید یه جایگاه جدید در قالب اضافه کنید. اگه به نمایش > فهرستها برین می تونید ببینید که یه جایگاه جدید به لیست جایگاه های موجود اضافه شده.

اضافه کردن منو جایگاه جدید به قالب

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

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

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

تابع wp_nav_menu

تابع register_nav_menu

احتمالا شما هم براتون این مشکل پیش اومده که در Gtmetrix بهتون خطا نشون میده که اندازه عکس ها بزرگتر از قابی که نمایش داده میشه. دستی درست کردن عکس ها زمان بر هست یه روش ساده استفاده از کراپ وردپرس هست و برای اینکه بتونید اندازه عکس ها رو تغییر بدید یک ترفند ساده برای انجام این کار وجود داره و اون هم اضافه کردن اندازه مختلف عکس به فایل Functions.php قالبتون هست.

اضافه کردن اندازه مختلف تصویر در وردپرس

برای اینکار کافی به فایل functions.php برین و مشابه کد زیر رو به فایل اضافه کنید.

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

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

توضیح تابع add_image_size

در بخش اول یک نام برای نحوه کراپ در نظر می گیریم که باید یکتا باشه. بعد اندازه عرض و طول تصویر رو مشخص می‌کنیم. اگه از True استفاده کنیم تصویر تا حد ممکن کراپ میشه که بهش hard crop می گن.

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

<?php the_post_thumbnail( 'homepage-thumb' ); ?>

سلام رفقا!! امیدوارم به دور از کرونا سالم و سلامت باشید.

امروز یه مطلب جالب آموزشی برای شما داریم و اون هم نحوه اضافه کردن ویجت (Widget) به وردپرس هست.

ویجت(Widget) چیه؟

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

سلام رفقا!

امروز یه ترفند دیگه از وردپرس داریم که مطمئنم برای خیلی ها سوال بوده مخصوصا اگه سایتی رو برای یه مشتری میخوای بسازی و دوست داری لینک خودت رو داخل سایت جای بدی یا اینکه میخوای لینک خودت رو داخل سایت برای پشتیبانی اضافه کنی .

بریم ببینیم چطوری می تونیم این لینک رو ایجاد کنیم.

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

یکی از مشکلاتی که سایتهای وردپرسی دارند اینه که هیچ بکاپی رو به صورت اتوماتیک به شما نمیدن و شما باید خودتون به صورت مداوم برای حفظ اطلاعاتتون یا از دیتابیس بکاپ بگیرید یا به هاستینگتون بگین تا براتون بکاپ بگیره.

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

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

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

برای انجام این کار کافیه به فایل functions.php قالبتون وارد بشید و کد زیر رو در انتهای کدهای فایل functions.php وارد کنید.

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

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

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

خب بریم سراغ این ترفند که چطور باید این کار رو انجام بدید.