آموزش طراحی قالب وردپرس – قسمت چهارم(footer.php)
سلام
رسیدیم به قسمت چهارم از آموزش طراحی قالب وردپرس، در قسمت قبلی اومدیم و وردپرس را از طریق PHP Storm باز کردیم و فایل header.php را ساختیم، حال نوبت به فایل footer.php است که بهش می پردازیم؛ در ادامه همراه بپرسم باشید.
دوره رایگان طراحی قالب وردپرس
فایل footer.php چیست؟
در قسمت قبل توضیح مفصل دادیم که قالب از چه بخش هایی تشکیل شده است، لذا فایل footer.php حاوی کدهای بخش فوتر قالب سایت می باشد که در تمامی بخش های قالب یکسان است، پس ما بجای اینکه بیایم در هر بخش از قالب سایت کدهای فوتر را قرار دهیم، کدهای فوتر را در فایل footer.php ذخیره و فراخوانی میکنیم.
ساخت فایل footer.php
- در محیط PhpStorm روی پوشه قالب(که ما اسم آن را beporsam گذاشتیم) راست کلیک کنید و New و سپس New PHP File را انتخاب کنید و اسم footer.php را نوشته و ok را انتخاب کنید.
- سپس در PhpStorm فایل index.html را باز کنید(روی فایل دابل کلیک کنید).
- حالا باید ببینیم که تا خط چندم مربوط به هدر قالب است که باید کپی کنیم(اینجاست که اگر آشنایی مختصری با HTML داشته باشیم به راحتی خواهید فهمید).
- از خط ۲۸۲ تا خط ۳۵۰ را کپی و در فایل footer.php قرار میدهیم.
که پس از این کار، فایل footer.php ما شامل کدهای زیر میباشد:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ |
<footer> <div class="container"> <div class="footer-widget-row"> <div class="footer-widget contact-widget"> <div class="widget-title"> <img src="images/kotha-white-logo.png" alt=""> </div> <p> بپرسم را میتوان به عنوان مرجعی برای آموزش و حل مشکلات دانست، در بپرسم سعی کرده ایم آموزش های برنامه نویسی، طراحی سایت، کار با نرم افزارها ها و... را آموزش دهیم. همچنین محیطی فراهم کرده ایم تا کاربران بتوانند در این محیط سوالات خود را بپرسند و مشکل خود را حل کنند. </p> <div class="address"> <h4 class="text-uppercase">اطلاعات تماس</h4> <p> ایران، خراسان جنوبی</p> <p> شماره تماس: ۲۸۹۲ ۹۳۵ ۰۹۱۵</p> <a href="mailto:beporsam@gmail.com">beporsam@gmail.com</a> </div> </div> <div class="footer-widget twitter-widget"> <h2 class="widget-title text-uppercase"> آخرین نظرات </h2> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> </div> <div class="footer-widget social-widget"> <h2 class="widget-title text-uppercase"> همراه ما باشید </h2> <ul> <li><a href=""><i class="fa fa-facebook"></i>facebook</a></li> <li><a href=""><i class="fa fa-twitter"></i>twitter</a></li> <li><a href=""><i class="fa fa-instagram"></i>instagram</a></li> <li><a href=""><i class="fa fa-google-plus"></i> google plus</a></li> <li><a href=""><i class="fa fa-youtube"></i>Youtube</a></li> <li><a href=""><i class="fa fa-envelope"></i> E-mail</a></li> <li><a href=""><i class="fa fa-vimeo"></i> Vimeo </a></li> <li><a href=""><i class="fa fa-pinterest"></i> Pinterest</a></li> </ul> </div> </div> </div> <div class="container-fluid text-center ft-copyright"> <p>© ۱۳۹۸-۹۹ <a href="">beporsam </a> - Designed with <i class="fa fa-heart"></i> by <a href="http://fadev.ir">fadev</a></p> </div> </footer> <div class="scroll-up"> <a href="#"><i class="fa fa-angle-up"></i></a> </div> <!--//Script//--> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/slick.min.js"></script> <script src="js/main.js"></script> </body> </html> |
سپس نوبت به آدرس دهی فایل ها می باشد(در فایل footer.php باید آدرس فایل لوگو و فایل های js را عوض کنیم).
پس از جایگذاری آدرس جدید، فایل footer.php به صورت زیر باید شود:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ |
<footer> <div class="container"> <div class="footer-widget-row"> <div class="footer-widget contact-widget"> <div class="widget-title"> <img src="<?php echo get_template_directory_uri().'images/kotha-white-logo.png' ;?>" alt="www.beporsam.ir"> </div> <p> بپرسم را میتوان به عنوان مرجعی برای آموزش و حل مشکلات دانست، در بپرسم سعی کرده ایم آموزش های برنامه نویسی، طراحی سایت، کار با نرم افزارها ها و... را آموزش دهیم. همچنین محیطی فراهم کرده ایم تا کاربران بتوانند در این محیط سوالات خود را بپرسند و مشکل خود را حل کنند. </p> <div class="address"> <h4 class="text-uppercase">اطلاعات تماس</h4> <p> ایران، خراسان جنوبی</p> <p> شماره تماس: ۲۸۹۲ ۹۳۵ ۰۹۱۵</p> <a href="mailto:beporsam@gmail.com">beporsam@gmail.com</a> </div> </div> <div class="footer-widget twitter-widget"> <h2 class="widget-title text-uppercase"> آخرین نظرات </h2> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> <div class="single-tweet"> <p>متن نظر ...................... </p> </div> </div> <div class="footer-widget social-widget"> <h2 class="widget-title text-uppercase"> همراه ما باشید </h2> <ul> <li><a href=""><i class="fa fa-facebook"></i>facebook</a></li> <li><a href=""><i class="fa fa-twitter"></i>twitter</a></li> <li><a href=""><i class="fa fa-instagram"></i>instagram</a></li> <li><a href=""><i class="fa fa-google-plus"></i> google plus</a></li> <li><a href=""><i class="fa fa-youtube"></i>Youtube</a></li> <li><a href=""><i class="fa fa-envelope"></i> E-mail</a></li> <li><a href=""><i class="fa fa-vimeo"></i> Vimeo </a></li> <li><a href=""><i class="fa fa-pinterest"></i> Pinterest</a></li> </ul> </div> </div> </div> <div class="container-fluid text-center ft-copyright"> <p>© ۱۳۹۸-۹۹ <a href="">beporsam </a> - Designed with <i class="fa fa-heart"></i> by <a href="http://fadev.ir">fadev</a></p> </div> </footer> <div class="scroll-up"> <a href="#"><i class="fa fa-angle-up"></i></a> </div> <!--//Script//--> <script src="<?php echo get_template_directory_uri().'js/jquery-1.12.4.min.js' ;?>"></script> <script src="<?php echo get_template_directory_uri().'js/bootstrap.min.js' ;?>"></script> <script src="<?php echo get_template_directory_uri().'js/slick.min.js' ;?>"></script> <script src="<?php echo get_template_directory_uri().'js/main.js' ;?>"></script> </body> </html> |
بخش footer.php هم تکمیل شد، در قسمت بعدی قالب را در وردپرس نصب میکنیم تا به دیگر بخش های قالب بپردازیم
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید