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

[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) تغییر دهید .
منبع آموزش:مايكروسايت
صفحه آموزش

 

[دکوراسیون]

ممنون از شما دوشت عزیز