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

جستجو
فقط جستجو من
جستجو در عنوان
جستجو در محتوا
جستجو در دیدگاه ها
جستجو در خلاصه ها
Filter by Custom Post Type
برگه‌ها
پیش نمایش فرم
اسلایدر دلخواه

آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس

آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس

آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس
Rate this post

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

آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس

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

یادت نره بخونیش :   افزونه ی Shortcodes Ultimate وردپرس و نحوهء نصب و راه اندازی آن

دانلود افزونه WordPress Full Screen Search Overlay

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

برای این که شما بتوانید استایل این جستجو را عوض کنید باید به فایل استایل افزونه دسترسی داشته باشید و باید به آدرس wp-contents/plugins/full-screen-search-overlay/assets/css بروید و در نهایت فایل full-screen-search.css را با ویرایشگر متنی باز کنید تا بتوانید از این طریق به کدهای موربوط به استایل افزونه مورد نظر دسترسی داشته باشید و ان را به سلیقه خود تغییر دهید


/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
font-family: Arial, sans-serif;
background:none;
border:0 none;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
float:none;
font-size:100%;
height:auto;
letter-spacing:normal;
list-style:none;
outline:none;
position:static;
text-decoration:none;
text-indent:0;
text-shadow:none;
text-transform:none;
width:auto;
visibility:visible;
overflow:visible;
margin:0;
padding:0;
line-height:1;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
-webkit-appearance:none;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
}
 
/**
* Background
*/
#full-screen-search {
visibility: hidden;
opacity: 0;
z-index: 999998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.95);
 
/**
* Add some CSS3 transitions for showing the Full Screen Search
*/
transition: opacity 0.5s linear;
}
 
/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
/**
* Because we're using visibility and opacity for CSS transition support,
* we define position: fixed; here so that the Full Screen Search doesn't block
* the underlying HTML elements when not open
*/
position: fixed;
visibility: visible;
opacity: 1;
}
 
/**
* Search Form
*/
#full-screen-search form {
position: relative;
width: 100%;
height: 100%;
}
 
/**
* Close Button
*/
#full-screen-search button.close {
position: absolute;
z-index: 999999;
top: 20px;
right: 20px;
font-size: 30px;
font-weight: 300;
color: #999;
cursor: pointer;
}
 
/**
* Search Form Div
*/
#full-screen-search form div {
position: absolute;
width: 50%;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -25%;
}
 
/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input:-moz-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input::-moz-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
 
/**
* Search Form Input
*/
#full-screen-search form div input {
width: 100%;
height: 100px;
background: #eee;
padding: 20px;
font-size: 40px;
line-height: 60px;
}


این کدی که مشاهده می کنید ، کد استایل افزونه می باشد که در ادامه بخش های مختلف آن را برای شما معرفی می کنیم :
نکته اول : اگر به ابتدای کد دقت کنید شما فونت هایی که برای جستجوگر استفاده شده است را مشاهده می کنید که می توانید آنها را تغییر بدهید .
نکته دوم : اگر به کد نوشته شده در خط 52 دقت کنید Background را مشاهده کنید که نشان دهنده ی پس زمینه پاپ آپ کل سایت می باشد ، در این بخش با تغییر کد background: rgba(255,255,255,0.95) در خط 62 می توانید رنگ پس زمینه را تغییر دهید و این المان هایی که شما مشاهده می کنید نشان دهنده ی میزان شفافیت ، r،g،b می باشد .
نکته سوم : در خط 65 هم قطعه کد نحوه ی نمایش دادن پس زمینه را می بینید.
نکته چهارم : در خط 94 هم قطعه کد مربوط به تغییر استایل پاپ آپ است که با تغییر ویژگی color می توانید رنگ آن را عوض نمایید .
نکته پنجم : خطوط 120 و 140 هم مربوط به رنگ نوشته پیش فرض و پس زمینه جعبه جست جو می باشد .

یادت نره بخونیش :   افزونه ارسال پست مهمان وردپرس user submitted post

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

منبع : بیگ تم ارائه دهنده قالب های وردپرس و هک وردپرس

باکس دانلود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.