طراحی سایت ریسپانسیو در وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرس

طراحی سایت ریسپانسیو در وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرسReviewed by سعید دیدارنو on Sep 20Rating: 5.0طراحی سایت ریسپانسیو در وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرسنحوه ایجاد پاورقی ریسپانسیو,ایجاد پاورقی ریسپانسیو در وردپرس,ایجاد پاورقی سفارشی,ایجاد پاورقی سفارشی در وردپرس,طراحی سایت وردپرس,طراحی سایت ریسپانسیو

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

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

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

طراحی سایت ریسپانسیو در وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرس

طراحی سایت ریسپانسیو در وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرس

ایجاد قالب فرزند از قالب اصلی وردپرس سایت

اولین مرحله برای ایجاد پاورقی ریسپانسیو در سایت وردپرسی، ایجاد قالب فرزند از قالب وردپرس اصلی سایت است. برای این مقاله از قالب twentytwelve استفاده شده است. برای ایجاد قالب فرزند از قالب twentytwelve یک پوشه با نام twentytwelvechild در مسیر wp-content\themes ایجاد کنید. سپس در آن یک فایل style.css ایجاد کرده و متن زیر را در آن وارد کنید:

/*

Theme Name:     Twenty twelve for responsive footer

Theme URI:

Description:    Child theme to demo responsive footer

Author:         Abbas S

Template:       twentytwelve

Version:        ۱٫۰

*/

@import url("../twentytwelve/style.css");

در کد بالا شما فقط متا داده های قالب وردپرسی وبسایت خود مانند نام نسخه را مشخص کرده اید. فیلد template در قطعه کد بالا مشخص می کند که این یک قالب فرزند بوده و قالب اصلی twentytwelve است. تنها کافی است که فایل style.css از قالب اصلی را در style.css قالب فرزند وارد کنید تا تمام خصوصیات سبکی قالب اصلی را در آن داشته باشید.

بعد از آن که style.css را اضافه کردید، قالب کودک را می توانید در بخش مدیریت سیستم وردپرس خود مشاهده کنید. الان زمان آن است که قالب کودک را فعال کنید.

طراحی سایت وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرس سایت

ساخت یک ویجت نگه دارنده پاورقی

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

<?php  function twentytwelvechild_widgets_init() {     register_sidebar( array(         ‘name’ => __( ‘Footer Widget Area’, ‘twentytwelvechild’ ),

        ‘id’ => ‘footer-sidebar’,

        ‘description’ => __( ‘Appears on the footer, which has its own widgets’, ‘twentytwelvechild’ ),

        ‘before_widget’ => ‘

<div id=”%1$s” class=”widgetfooter”>’,

        ‘after_widget’ => ‘</div>

‘,

        ‘before_title’ => ‘

<h3 class=”widget-title”>’,

        ‘after_title’ => ‘</h3>

‘,

    ) );

}

add_action( ‘widgets_init’, ‘twentytwelvechild_widgets_init’ );

در قطعه کد بالا در قلاب ‘widgets_init’ وردپرس تنظیمات ویجت را تعریف شده است. در تابع twentytwelvechild_widgets_init ناحیه ویجت برای پاورقی جهت استفاده کردن از تابع register_sidebar به همراه شناسه footer-sidebar ثبت می شود.

اکنون زمان آن رسیده است که یک فایل با نام footer.php را پوشه قالب کودک خود ایجاد کنید و کد زیر را به آن اضافه کنید:

</div>

<!– #main .wrapper –>

<footer id=”footer”>

        <?php if ( is_active_sidebar( ‘footer-sidebar’ ) ) : ?>

<div class=”footer-widget-area” >

            <?php dynamic_sidebar( ‘footer-sidebar’ ); ?>

        </div>

    <?php endif; ?>

    </footer>

</div>

<!– #page –>

<?php wp_footer(); ?>

</body>

</html>

در قطعه کد بالا ما بررسی می کنیم که نوار کناری (به عنوان ناحیه ویجت) فعال است و اگر فعال باشد، ویجت ها را با استفاده از تابع dynamic_sidebar نمایش می دهیم و شناسه را به عنوان ‘footer-sidebar’ قرار می دهیم. البته نباید فراموش کنید که تابع ;()wp_footer را فراخوانی کنید تا عملکرد قطعه کد بالا نمایش داده شود. هنگامی که footer.php بازنویسی شد همانطور که نشان داده شده است، باید بتوانید ناحیه ویجت پاورقی نوار کناری را در بخش مدیریت خود به صورت زیر مشاهده کنید. شما باید ویجت ها را به آن اضافه کنید.

مدیریت ویجت ها یا ابزارها برای تنظیم نمایش آن ها در صفحه نمایش های کوچک

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

.widgetfooter {

                        float: left;

                        width: 30%;

                        padding-top: 5px;

                        padding-bottom: 20px;

}

.widgetfooter ol, ul {

            padding-left: 20px;

            list-style: circle;

}

/* Mobiles in Potrait mode */

@media only screen

and (max-width : 320px) {

            .widgetfooter {

                        float: left;

                        width: 100%;

                        padding-top: 5px;

                        padding-bottom: 20px;

            }

}

/* Mobiles in landscape mode */

@media only screen

and (min-width : 321px)

and (max-width : 480px) {

            .widgetfooter {

                        float: left;

                        width: 100%;

                        padding-top: 5px;

                        padding-bottom: 20px;

            }

}

در CSS فوق به صورت پیش فرض ما ویجت پاورقی را در سمت راست شناور نگه داشته ایم و به ۳۰ درصد از فضای در دسترس محدود کرده ایم. بنابراین ویجت ها در سمت راست ویجت قبلی در صفحه نمایش های بزرگ نمایش داده خواهند شد. می توانید به شکل زیر توجه کنید:

طراحی سایت وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرس سایت

اما همانطور که می دانید، در صفحه نمایش های کوچک تر خواندن دشوار تر خواهد شد. بنابراین برای این دسته از صفحه نمایش ها ما ویجت ها را طوری باز تعریف کردیم که بتوانیم آن ها زیر یک دیگر نمایش دهیم. برای این هدف، ما تعریف کرده ایم که وقتی صفحه نمایش کوچک است (مانند تلفن های همراه)، عرض ویجت ۱۰۰ درصد شود و آن ها به این ترتیب زیر یکدیگر قرار خواهند گرفت. به شکل زیر توجه کنید:

طراحی سایت وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرس سایت

اضافه کردن یک لینک برای انتقال به بالا

آخرین گام در فرآیند ایجاد پاورقی سفارشی در وردپرس، افزودن لینک به آن است تا کاربر بتواند به بالای صفحه منتقل شود. فضای افقی در صفحه نمایش های کوچک کمتر در دسترس هستند. بنابراین ما عموما محتوای بیشتری را به صورت عمودی نشان می دهیم. این مسئله باعث می شود که کاربر سایت مجبور شود پیمایش بیشتری را انجام دهد و به سمت پایین تر بیشتر حرکت کند. بنابراین، پیشنهاد می شود که یک لینک در پایین صفحه اضافه کنید تا کاربر بتواند با استفاده از آن به بالای صفحه منتقل شود. این گونه قادر هستید که تجربه کاربری سایت خود را بهبود بدهید. برای رسیدن به این هدف باید یک div در صفحه خود تعریف و مشخص کنید که نشانگر بالای صفحه است. بنابراین کافی است که کد فایل footer.php را در قالب فرزند خود، با استفاده از قطعه کد زیر بروزرسانی کنید:

</div>

<!– #main .wrapper –>

<footer id=”footer”>

        <?php if ( is_active_sidebar( ‘footer-sidebar’ ) ) : ?>

<div class=”footer-widget-area” >

            <?php dynamic_sidebar( ‘footer-sidebar’ ); ?>

        </div>

    <?php endif; ?>

<div id=”footerlink”>

            <a href=”#main”>Go back to the top</a>

    </div>

    </footer>

</div>

<!– #page –>

<?php wp_footer(); ?>

</body>

</html>

Add add the following style to your style.css of the child theme:

#footerlink {

            float: left;

            width:100%;

            text-align:center;

            padding-bottom: 20px;

}

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

طراحی سایت وردپرس | آموزش نحوه ایجاد پاورقی ریسپانسیو در وردپرس سایت

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

آموزش وردپرس

درباره سعید دیدارنو

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

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

پانزده − چهارده =

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