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

همچنین بخش head رو ساختیم. حالا نوبت به این رسیده که بریم سراغ طراحی بخش هدر سایت

فیلم آموزشی طراحی قالب وردپرس – تکمیل header.php

 

من یک طرحی رو انتخاب کردم برای بخش هدر که عکسشو هم این پایین گذاشتم.

این نکته رو هم بگم که میخواییم از فریم ورک بوت استرپ استفاده کنم.

آخرین ورژن بوت استراپ را از سایت getbootstrap.com دانلود کنید.

header

آموزش طراحی قالب وردپرس

function theme_styles() {
// فراخوانی استایل ها
wp_enqueue_style( 'style', get_stylesheet_uri());
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css', '3.3.2', true );
wp_enqueue_style( 'bootstrap-responsive', get_template_directory_uri() . '/assets/css/bootstrap-theme.min.css', '3.3.2', true );

// فراخوانی اسکریپت ها
wp_enqueue_script('jquery');
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', '3.3.2', true );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

 

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

من این کد رو هم به فایل functions.php اضافه کردم

// ساخت بخش منو سایت
if (function_exists('add_theme_support')) {
add_theme_support('menus');
}
add_action( 'init', 'register_menu' );
function register_menu() {
register_nav_menus(
array(
'top-menu' => __( 'منو سربرگ' ),
)
);
}

 

خب حالا وقتی به بخش نمایش برید باید بخشی به نام فهرست ها باشه. یک منو بسازید.

حالا نوبت به این میرسه که منو رو توی هدر فراخوانی کنیم تا منو نمایش داده بشه.

این کد رو به فایل header.php اضافه کنید

 

<body>
<header class="navbar bs-docs-nav header-section" id="top" role="banner">
<div class="container">
<div class="logo col-md-3 col-sm-12 col-xs-12 pull-right">

<h1><a href="<?php echo get_home_url();?>" class="navbar-brand"><?php bloginfo( 'name' );?></a></h1>
<div class="clearfix"></div>
<div class="description"><?php bloginfo( 'description' );?></div>

</div>

<div class="top-banner col-md-9 col-sm-12 col-xs-12 pull-left">جای کد تبلیغاتی</div>';

<div class="clearfix"></div>
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">منو سایت</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse top-menu">
<?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?>
</nav>
</div>
</header>

 آموزش طراحی قالب وردپرس

خب همونطور که میبینید کد بالا یک بخش لوگو یک بخش بنر تبلیغاتی و یک بخش برای منو داره

اما ما نمی خواهیم لوگو یا بنر تبلیغاتیمونو دستی از اینجا ادیت کنیمک بلکه میخواهیم اینم داینامیک باشه. مثل theme option. حالا یه روشی رو برای ساخت پنل تنظیمات پوسته میگم بهتون.

افزونه option tree

با این افزونه میتونیم یک پنل تنظیمات حرفه ای و کامل بسازیم. بعد از این که افزونه رو نصب و فعال کردید، در زیر منو نمایش منو جدیدی به نام Option Tree ظاهر میشه. به بخش settings بروید

یک پنل تنظیمات به شکل زیر میبینید

4

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

هنگام افزودن یک تنظیم جدید هم نام و آی دی و نوع ازتون میخواد. مثلا من برای لوگو سایت نوع رو upload گذاشتم. و همچنین آی دی رو eli_logo گذاشتم.

وقتی پنل مربوط به لوگو و بنر تبلیغاتی رو ساختید کد هدری که گذاشتیم رو پاک کنید و اینو جایگزین کنید

<body>
<header class="navbar bs-docs-nav header-section" id="top" role="banner">
<div class="container">
<div class="logo col-md-3 col-sm-12 col-xs-12 pull-right">
<?php $logo =ot_get_option('eli_logo');
if ( !$logo=="") {
echo $logo;
}
else {
?>
<h1><a href="<?php echo get_home_url();?>" class="navbar-brand"><?php bloginfo( 'name' );?></a></h1>
<div class="description"><?php bloginfo( 'description' );?></div>
<?php } ?>
</div>
<?php $top_ads =ot_get_option('eli_top_ads');
if (!$top_ads=="") {
echo'
<div class="top-banner col-md-9 col-sm-12 col-xs-12 pull-left">'.$top_ads.'</div>';
}
else
{}
?>
<div class="clearfix"></div>
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">منو سایت</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse top-menu">
<?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?>
</nav>
</div>
</header>

 

تابع ot_get_option(‘ID’) : این تابع مقدار تنظیم رو بر میگردونه فقط کافیه به جای ID آی دی که برای تنظیم گذاشتید رو قرار بدید. پس اسم ID های بالا رو عوض کنید

اگر با php آشنا باشید متوجه میشی که چه اتفاقی می افته.

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

اگر در رابطه با افزونه مشکل داشتید در بخش دیدگاه بگید. کار باهاش خیلی راحته

خب تمامی فایل ها رو ذخیره کنید و صفحه سایت رو رفرش کنید. باید لوگو و همچنین منو و همچنین تبلیغات ( در صورت گذاشتن ) رو ببینید اگر هم یکی از اینارو نمیبیند یه جای کارو اشتباه انجام دادید. اما اگر میبینید باید ظاهر زشتی داشته باشه.

من کد CSS رو هم واستون قرار میدم. در نهایت باید این شکلی باشه

header2

 

عکس بالا هدری هستش که من طراحی کردم

کد css هم این است

@font-face{
font-family:'yekan';
src:url('assets/fonts/BYekan.eot?v=4.2.0');
src:url('assets/fonts/BYekan.eot?#iefix&v=4.2.0') format('embedded-opentype'),
url('assets/fonts/BYekan.woff?v=4.2.0') format('woff'),
url('assets/fonts/BYekan.ttf?v=4.2.0') format('truetype'),
url('assets/fonts/BYekan.svg?v=4.2.0#BYekan') format('svg');
font-weight:normal;
font-style:normal;
}

h1,h2,h3,h4,h5,h6 {
font-family:'yekan' !important;
font-weight:200; 
}


/******************* Header Section *******************/

.header-section{
background:#fff url(assets/images/top-body.png) repeat top center; 
position:relative;
padding-bottom:10px;
box-shadow: 0 0 3px #D8D8D8;
}

.top-menu ul {
list-style:none;
padding:0;
margin:20px 0 0;
}

.top-menu ul li {
display:inline-block;
padding: 10px;
float:right;
margin-left:10px;
}

.top-menu ul li:hover {
background:#e74c3c;
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}

.top-menu ul li:hover a {
color:#fff;
text-decoration:none;
}

.top-menu ul li.current-menu-item {
background:#e74c3c; 
}

.top-menu ul li.current-menu-item a {
color:#fff; 
}

.top-menu ul li a {
font-family:'yekan';
color:#333;
}

.logo{
padding:20px 0; 
}

.logo h1 {
float:right;
margin-bottom:0;
}

.logo h1 a {
font-size:30px;
padding-right:0;
color:#e74c3c; 
}

.description {
font-family: 'yekan';
font-size: 13px;
}


.top-banner {
padding: 40px 0 0;
text-align: left; 
}

 

اینم تصویر خط بالا

top-body

حالا سیو کنید و تغییرات رو ببینید

همچنین من یه کد دیگه هم تو فایل فانکشن گذاشتم که اگر کاربر لاگین کرده بود نوار ادمین رو نشون نده

کدش هم اینه

if ( is_user_logged_in() ) {
function my_function_admin_bar() {
return false;
}
}

add_filter('show_admin_bar', 'my_function_admin_bar');

فعلا آموزش رو اینجا متوقف می کنیم. بخش هدر تا جایی که قابل قبول باشه درست شد

هر سوالی در رابطه با این بخش از آموزش طراحی قالب وردپرس داشتید همینجا در دیدگاه ها قرار بدید

موفق باشید

تا بعد بای

49 دیدگاه برای “آموزش طراحی قالب وردپرس – تکمیل header.php

  • hassan
    - ۲۵ بهمن , ۱۳۹۳

    ممنون مفید بود
    بسیار مفید بود
    سپاس

  • naser
    - ۲۵ بهمن , ۱۳۹۳

    مثل همیشه عالی بود

  • ملیسا
    - ۲۵ بهمن , ۱۳۹۳

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

    • الناز بیک زاده
      - ۲۵ بهمن , ۱۳۹۳

      سلام ملیسا جان. بوت استراپ در واقع فریم ورکی هست که دارای کدهای css آماده ست و میتونید بر پایه اون سایتتون رو بسازید. برای اطلاعات بیشتر به سایت
      rbootstrap.ir
      مراجعه کن

      • علی
        - ۱۸ اسفند , ۱۳۹۴

        سلام
        توجه کنید بوتسترپ فقط شامل کلاس های css اماده نیست، بوتسترپ شامل css، javascript،tml و … است که کار طراحی ریسپانسیو را ساده تر میکنه

  • مهدی طیبی
    - ۲۶ بهمن , ۱۳۹۳

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

    بازم ممنون از آموزش های خوبی که می زارید .

    • الناز بیک زاده
      - ۲۶ بهمن , ۱۳۹۳

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

  • سیروس
    - ۳۰ بهمن , ۱۳۹۳

    سلام باز هم ممنون آموزش فوق العاده ای که قرار دادید بی صبرانه منتظر قسمت های بعدی هستیم

  • تور مشهد
    - ۱۱ اسفند , ۱۳۹۳

    مرسی خیلی ممنونم

  • علی
    - ۱۶ اسفند , ۱۳۹۳

    بسیار عالی این سری آموزش های ادامه دار خیلی خوبن

  • حمید
    - ۲۴ اسفند , ۱۳۹۳

    سلام آموزشت خوبه و امید وارم که خیلی از دوستان بتونن ازش استفاده کنن
    اما ایکاش اول کد های htmlمیگفتی و بعد کدهای phpو محل قرار گرفتنشون در بین کدهای htmlکه باعث میشود بهتر یاد بگیرن و لذت بیشتری از ساخت یک تم با دستان خودشون میشودن .اما علمتو ر اختیار دیگران میزاری ممنونم و این خودش یه دنیا ارزش داره

    • الناز بیک زاده
      - ۲۵ اسفند , ۱۳۹۳

      سلام حمید جان. ممنون از دیدگاهی که گذاشتی اما چون دیگه آموزش به این روند شروع شده دیگه نمیشه روششو تغییر داد

  • mahdi
    - ۱۳ تیر , ۱۳۹۴

    با سلام و خسته نباشید
    ببخشید بعد از اینکه بوت استراپ و جی کوئری رو دانلود کردیم باید کجا قرار بدیم

  • Sina
    - ۱۸ تیر , ۱۳۹۴

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

    • الناز
      - ۱۹ تیر , ۱۳۹۴

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

  • پدرام
    - ۲۱ تیر , ۱۳۹۴

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

    ممنون میشوم راهنمایی بفرمایید که به نظر شما کجای کار اشتباه کردم

    • الناز
      - ۲۲ تیر , ۱۳۹۴

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

    • Jafari
      - ۱۴ آذر , ۱۳۹۵

      این مشکل منم هست و عکسی که الناز در پاسخ گذاشته باز نمیشه.
      لطفا پاسخ دهید

      • الناز
        - ۲۵ آذر , ۱۳۹۵

        تصحیح شد

  • پدرام
    - ۲۱ تیر , ۱۳۹۴

    سلام مجدد
    البته من فکر میکنم ایراد از افزونه یا تنظیمات راه اندازی اولیه ی اون باشه
    optiontree
    بغیر از نصب عادی افزونه آیا کار خاصی باید انجام داد؟

    • الناز
      - ۲۲ تیر , ۱۳۹۴

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

  • ازمایشگاه کالیبراسیون
    - ۲۲ مرداد , ۱۳۹۴

    سلام خسته نباشید من به کمی تغییرات تو قالب سایتم نیاز دارم چطوری باید باهاتون همانگ کنم.

  • ali
    - ۶ آذر , ۱۳۹۴

    با سلام
    اولا تشکر راجع به زحمتی که دارید میکشید و نمیشه ازش چشم پوشی کرد
    اما کد رو خیلی کلی توضیح دادید اینطوری فقط افرادی که حرفه ای هستند میفهمند راجع به چی دارید صحیت میکنید (البته اگه هدفتون آموزش به افراد سطح بالاتر نبوده) بنظر من آموزش قالب ورد پرس نیازمند تعداد جلسات بسیار بیشتر و نکات ریزتری هستش چون مطمئنا افرادی که تازه با وردپرس آشنایی دارن و می خوان یواش یواش شرو کنن با این روند شما سریع خسته شده و از ادامه آموزش کناره گیری میکنن من ی سایتی رو معرفی میکنم که برای افراد سطح پایین تر هم قابل استفاده باشه که از روند آموزش ویدیویی استفاده کرده : http://it-research.ir

    البته این نظر من بود سربلند و پیروز باشید …

  • مریم
    - ۲۵ بهمن , ۱۳۹۴

    با سلام و تشکر از آموزش بسیار جامع و مفیدتون. عذر میخوام چون از بوت استرپ استفاده کردیم طبیعتاً باید موقعی که صفحه مرورگر را کوچیک میکنیم بجای منو سه خط (Glyphicons) نمایش داده بشه و با کلیک بر روی اون منو ظاهر شه اما واسه من تصویر Glyphicons مربوطه رو نشون نمیده و فقط منو محو میشه و با کلیک روی نقطه مشخص ظاهر میشه. کجا باید تغییرات اعمال کنم؟

    • الناز
      - ۲۱ فروردین , ۱۳۹۵

      سلام. باید با CSS به اون خطوط رنگ بدید

  • bahar
    - ۱۲ اسفند , ۱۳۹۴

    salam …
    قدم سوم بخش دومش که تموم میشه ، چرا قدم چهارم رو نداریم ! هرچی میزنم باز ترتیبا ب هم میریزه … قدم چهارم دو بخشه که هیچ کدوم رو نمیشه باز کرد … یهو میره آموزش حلقه ها

    • الناز
      - ۱۲ اسفند , ۱۳۹۴

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

  • siavash
    - ۱۶ اسفند , ۱۳۹۴

    سلام
    ۲ تا سوال
    ۱- این کد و کجا باید قرار داد ؟
    function theme_styles() {
    // فراخوانی استایل ها
    wp_enqueue_style( ‘style’, get_stylesheet_uri());
    wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘/assets/css/bootstrap.min.css’, ‘3.3.2’, true );
    wp_enqueue_style( ‘bootstrap-responsive’, get_template_directory_uri() . ‘/assets/css/bootstrap-theme.min.css’, ‘3.3.2’, true );

    // فراخوانی اسکریپت ها
    wp_enqueue_script( ‘jquery’, get_template_directory_uri() . ‘/assets/js/jquery.min.js’, ‘3.3.2’, true );
    wp_enqueue_script( ‘bootstrap’, get_template_directory_uri() . ‘/assets/js/bootstrap.min.js’, ‘3.3.2’, true );
    }
    add_action( ‘wp_enqueue_scripts’, ‘theme_styles’ );

    ۲- bootstrap va js رو دارم ولی نمی دونم کجا باید بزارمشون ..
    ممنون

    • الناز
      - ۲۱ فروردین , ۱۳۹۵

      سلام. داخل فایل FUNCTION.PHP

  • مصطفی
    - ۲۸ فروردین , ۱۳۹۵

    کد CSS در کدام فایل باید قرار بدم؟

    • الناز
      - ۱۱ اردیبهشت , ۱۳۹۵

      فایل style.css

  • هادی
    - ۲۹ اردیبهشت , ۱۳۹۵

    سلام ممنون از راهنماییاتون
    ۲ تا سوال دارم 🙂
    یکی اینکه من میخوام قالبم سوشیال داشته باشه ولی داخل کد نمیخوام لینک اکانت رو اضافه کنم میخوام از پنل مدیریت لینک داده شه. از پلاگین ام نمیخوام استفاده کنم.. چیکار کنم ؟
    و سوال دیگم اینه که واسه صفحه دوم قالبم چیکار کنم ؟ صفحه اولش استاتیکه و صفحه دومش حالت وبلاگ داره صفحه اول رو داخل index.php گذاشتم ولی نمیدونم صفحه دیگه رو کلا چیکا کنم؟

    میدونم خیلی به این مطلبتون ارتباط موضوعی نداره راهنمایی کنین ممنون میشم 🙂

    • الناز
      - ۳ خرداد , ۱۳۹۵

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

  • مصطفی
    - ۱۳ تیر , ۱۳۹۵

    سلام ببخشید من کد ها ی بالا رو تو فاگشن قرار می دم ولی ارور میده

  • فرهاد
    - ۸ شهریور , ۱۳۹۵

    سلام من افزونه open tree رو روی ورد پرس خودم سرچ میکنم چیزی نشونم نمی ده میشه راهنماییم کنین.

    • الناز
      - ۱۱ شهریور , ۱۳۹۵

      سلام فرهاد جان. شما باید به قسمت افزونه ها -> افزودن برید و افزونه رو سرچ کنید و نصبش کنید

  • حسین رحیمی
    - ۲۸ شهریور , ۱۳۹۵

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

    • الناز
      - ۶ مهر , ۱۳۹۵

      داخل فایل functions.php

  • بهنام
    - ۲۰ مهر , ۱۳۹۵

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

    • الناز
      - ۶ آبان , ۱۳۹۵

      سلام دوست عزیز. چه فریم وورکی؟

  • مصطفی
    - ۸ دی , ۱۳۹۵

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

    • الناز
      - ۲۳ بهمن , ۱۳۹۵

      سلام. لطف کنید فایل functions.php رو واسم بفرستید
      wpschool1@gmail.com

  • محسن(مبتدی)
    - ۷ فروردین , ۱۳۹۶

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

    • الناز
      - ۱۸ فروردین , ۱۳۹۶

      سلام دوست عزیز. این تگ هایی که مونده داخل فایل footer.php بسته میشه یعنی انتهایی ترین قسمت سایت

  • محسن(مبتدی)
    - ۷ فروردین , ۱۳۹۶

    سلام وقت بخیر ببخشید این تگ body که اول یکی از همین کدها نوشتید خوب چرا نبستیدش

    • الناز
      - ۱۸ فروردین , ۱۳۹۶

      سلام دوست عزیز. تگ body داخل فایل footer.php بسته میشه

  • یاسر
    - ۲۴ اردیبهشت , ۱۳۹۸

    سلام ببخشید میشه اون فایل که داخل این آموزش هست رو آپلود کنید پوشه
    assets رو میشه داخل سایت آپلود کنید

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

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

-- بارگیری کد امنیتی --