استایل زیبا برای صفحه بندی سایت

djmostafa

کاربر تازه وارد
تازه وارد
سلام امروز در خدمت دوستان مایکروسایت هستیم با یک آموزش زیبا و مفید و کارآمد. حتما شما برای صفحه بندی سایتتون از افزونه wp-page-navi استفاده میکنید،ولی ظراهر زیبایی نداره تو پستهای قبل که این افزونه رو معرفی کردیم یک استایل براتون گذاشته بودیم .امروز در این پست هم استایل صفحه بندی سایت خودمورو براتون رار داریم. با ما همراه باشید…
در خیلی از سایت ها مثل سایت ما دیده اید که برای صفه بندی متناسب با قالبشون یک استایل برای صفحه بنید دارند این استایل سایت ما هست که میتونید به سلیقه خودتون اون رو ویرایش کنید
[h=3]۱)ابتدا افزونه wp-page را دانلود و سپس نصب کنید.(از این صفحه میتوانید دانلود کنید)[/h] [h=3]۲)سپس کدهای زیر را به فایل index.php اضافه کنید(و هر صفحه ای که میخواهید)[/h]
کد:
<div class="wp-pages">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>
[h=3]۳)سپس کدهای زیر را به فایل استایل اضافه کنید[/h]
کد:
.wp-pages {
    border: 1px solid #D0D0D0;
    border-radius: 7px 7px 7px 7px !important;
    box-shadow: 0.5px 0.5px 0.5px 0.5px #FFFFFF;
    display: block;
    float: right;
    height: auto;
    padding: 5px;
    text-align: center;
    width: 700px;
    background-color: #FAF8F8;
}
.wp-pagenavi {
    clear: both;
    direction: rtl;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5px 15px;
    border-radius: 7px 7px 7px 7px !important;
}
.wp-pagenavi h3 {
    font-weight: normal;
    color: #FFF;
}
.wp-pagenavi a, .wp-pagenavi span {
    background-color: #21759B;
    ackground: -moz-linear-gradient(center top, #47A4F0, #2191ED) repeat scroll 0 0 / 100% auto #2191ED;
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 1px 1px #000000;
    float: right;
    font-size: 12px !important;
    margin: 2px;
    padding: 6px 9px !important;
    text-decoration: none;
    color: #FFF;
    border-radius: 7px 7px 7px 7px !important;
    border-bottom-width: 3px;
    border-bottom-style: outset;
    border-top-color: #21759B;
    border-right-color: #21759B;
    border-bottom-color: #1E6A8D;
    border-left-color: #21759B;
}
.wp-pagenavi span.current {
    background-color: #21759B;
    ackground: -moz-linear-gradient(center top, #47A4F0, #2191ED) repeat scroll 0 0 / 100% auto #2191ED;
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 7px 7px 7px 7px !important;
    margin-right: 3px !important;
    padding: 6px 9px !important;
    border-bottom-width: 1px;
    border-top-color: #21759B;
    border-right-color: #21759B;
    border-bottom-color: #1E6A8D;
    border-left-color: #21759B;
    font-weight: normal;
    text-shadow: 1px 1px #000000;
}
.wp-pagenavi a:hover {
    background-color: #21759B;
    ackground: -moz-linear-gradient(center top, #47A4F0, #2191ED) repeat scroll 0 0 / 100% auto #2191ED;
    border-color: #21759B #21759B #1E6A8D;
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    padding: 5px;
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    -ms-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
    border-radius: 7px 7px 7px 7px !important;
    opacity: 0.8;
}
.wp-pagenavi span.current {
    background-color: #21759B;
    ackground: -moz-linear-gradient(center top, #47A4F0, #2191ED) repeat scroll 0 0 / 100% auto #2191ED;
    border-color: #21759B #21759B #1E6A8D;
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    padding: 5px;
    border-radius: 7px 7px 7px 7px !important;
}
خب الان صفحه بندی با استایل ما ایجاد شده است
ممکنه سایز باکس بزرگ یا کوچک باشد شما باید در استایل اول (.wp-pages) مقدار پهنا ( width: 700px;) را متناسب به قالبتون تغییر دهید
رنگ های هر بخش رو هم باید از جلوی عبارت (background-color) تغییر دهید .
منبع آموزش:مايكروسايت
صفحه آموزش
 
بالا