سلام دوستای عزیز. در قسمت قبلی آموزش یاد گرفتیم که چطوری پوسته رو به وردپرس بشناسونیم و اینکه با یک سری از توابع آشنا شدیم.
همچنین بخش head رو ساختیم. حالا نوبت به این رسیده که بریم سراغ طراحی بخش هدر سایت
فیلم آموزشی طراحی قالب وردپرس – تکمیل header.php
این نکته رو هم بگم که میخواییم از فریم ورک بوت استرپ استفاده کنم.
آخرین ورژن بوت استراپ را از سایت getbootstrap.com دانلود کنید.
آموزش طراحی قالب وردپرس
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 بروید
یک پنل تنظیمات به شکل زیر میبینید
با دکمه 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 رو هم واستون قرار میدم. در نهایت باید این شکلی باشه
عکس بالا هدری هستش که من طراحی کردم
کد 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;
}
اینم تصویر خط بالا
حالا سیو کنید و تغییرات رو ببینید
همچنین من یه کد دیگه هم تو فایل فانکشن گذاشتم که اگر کاربر لاگین کرده بود نوار ادمین رو نشون نده
کدش هم اینه
if ( is_user_logged_in() ) {
function my_function_admin_bar() {
return false;
}
}
add_filter('show_admin_bar', 'my_function_admin_bar');فعلا آموزش رو اینجا متوقف می کنیم. بخش هدر تا جایی که قابل قبول باشه درست شد
هر سوالی در رابطه با این بخش از آموزش طراحی قالب وردپرس داشتید همینجا در دیدگاه ها قرار بدید
موفق باشید
تا بعد بای
ممنون مفید بود
بسیار مفید بود
سپاس
مثل همیشه عالی بود
سلام و خسته نباشید. ممکنه لطفا در مورد بوت استرپ ،قابلیتاش ،اینکه چی هست و انواعش هم توضیحی بدید؟
از سایت عالیتون واقعا متشکرم.
سلام ملیسا جان. بوت استراپ در واقع فریم ورکی هست که دارای کدهای css آماده ست و میتونید بر پایه اون سایتتون رو بسازید. برای اطلاعات بیشتر به سایت
rbootstrap.ir
مراجعه کن
سلام
توجه کنید بوتسترپ فقط شامل کلاس های css اماده نیست، بوتسترپ شامل css، javascript،tml و … است که کار طراحی ریسپانسیو را ساده تر میکنه
سلام . خانم بیک زاده آموزش خیلی خوبی بودش براش شروع کار . سعی داشتم آموزش طراحی قالب وردپرس با استفاده از فریم ورک بوت استرپ ۳.۳ تو سایتم قرار بدم که شما دارید این زحمت می کشید . به احتمال زیاد فقط در حد آموزش خود بوت استرپ می پردازم . …
بازم ممنون از آموزش های خوبی که می زارید .
سلام دوست من. خیلی ممنون از شما. بسیار عالی حتما آموزشتونو لینک میکنم به اینجا. چرا که ممکنه بعضی از کاربران با بوت استراپ آشنایی نداشته باشند و مقاله شما بتونه کمکشون کنه
سلام باز هم ممنون آموزش فوق العاده ای که قرار دادید بی صبرانه منتظر قسمت های بعدی هستیم
مرسی خیلی ممنونم
بسیار عالی این سری آموزش های ادامه دار خیلی خوبن
سلام آموزشت خوبه و امید وارم که خیلی از دوستان بتونن ازش استفاده کنن
اما ایکاش اول کد های htmlمیگفتی و بعد کدهای phpو محل قرار گرفتنشون در بین کدهای htmlکه باعث میشود بهتر یاد بگیرن و لذت بیشتری از ساخت یک تم با دستان خودشون میشودن .اما علمتو ر اختیار دیگران میزاری ممنونم و این خودش یه دنیا ارزش داره
سلام حمید جان. ممنون از دیدگاهی که گذاشتی اما چون دیگه آموزش به این روند شروع شده دیگه نمیشه روششو تغییر داد
با سلام و خسته نباشید
ببخشید بعد از اینکه بوت استراپ و جی کوئری رو دانلود کردیم باید کجا قرار بدیم
سلام دوست من. طبق این آموزش فایل هارو فراخوان کنید
wp_enqueue در وردپرس
بد نبود
شما اومدید فقط کپی پیس کردید ی توضیح مختصر اینطور نمیشه آموزش بدید
همون اولش که نگاه کردم بیخیال شدم بعضی جاهارو کدشو کپی کردید اصنم توضیح ندادید بعضی جاهای دیگه ی توضیح کوچیک
دوست عزیز آموزش ها کپی پیست نیس و کاملا تخصصی هستش در ضمن برای طراحی قالب حتما باید پیش زمینه هایی بلد باشید. پس فکر نمی کنم این آموزش مناسب شما بوده باشه
سلام
ممنون بابت آموزش خوبتون
من کارهایی که فرمودید رو انجام دادم اما متاسفانه موقغی که صفحه رو ریفرش میکنم به جای عکس لوگو فقط آدرس آن را مینویسد و خود لوگو ظاهر نمیشود
داخل پرانتز بگویم من به جای تبلیغات؛ لوگو را در حالت آپلود قرار دادم و به آن آی دی انگلییسی دادم و تمامی کدهای مربوط به ایت قسمت را در مکان مورد با آی دی انتخابی کپی کردم
ممنون میشوم راهنمایی بفرمایید که به نظر شما کجای کار اشتباه کردم
سلام دوست عزیز. شما باید کد مربوط به فراخوانی لوگو را داخل تگ![]()
قرار بدید به صورت زیر
این مشکل منم هست و عکسی که الناز در پاسخ گذاشته باز نمیشه.
لطفا پاسخ دهید
تصحیح شد
سلام مجدد
البته من فکر میکنم ایراد از افزونه یا تنظیمات راه اندازی اولیه ی اون باشه
optiontree
بغیر از نصب عادی افزونه آیا کار خاصی باید انجام داد؟
دوست عزیز پلاگین مشکلی نداره اگر طبق آموزش پیش رفته باشید مشکلی پیش نمیاد
سلام خسته نباشید من به کمی تغییرات تو قالب سایتم نیاز دارم چطوری باید باهاتون همانگ کنم.
سلام. با ایمیل wpchool1@gmail.com در ارتباط باشید
با سلام
اولا تشکر راجع به زحمتی که دارید میکشید و نمیشه ازش چشم پوشی کرد
اما کد رو خیلی کلی توضیح دادید اینطوری فقط افرادی که حرفه ای هستند میفهمند راجع به چی دارید صحیت میکنید (البته اگه هدفتون آموزش به افراد سطح بالاتر نبوده) بنظر من آموزش قالب ورد پرس نیازمند تعداد جلسات بسیار بیشتر و نکات ریزتری هستش چون مطمئنا افرادی که تازه با وردپرس آشنایی دارن و می خوان یواش یواش شرو کنن با این روند شما سریع خسته شده و از ادامه آموزش کناره گیری میکنن من ی سایتی رو معرفی میکنم که برای افراد سطح پایین تر هم قابل استفاده باشه که از روند آموزش ویدیویی استفاده کرده : http://it-research.ir
البته این نظر من بود سربلند و پیروز باشید …
با سلام و تشکر از آموزش بسیار جامع و مفیدتون. عذر میخوام چون از بوت استرپ استفاده کردیم طبیعتاً باید موقعی که صفحه مرورگر را کوچیک میکنیم بجای منو سه خط (Glyphicons) نمایش داده بشه و با کلیک بر روی اون منو ظاهر شه اما واسه من تصویر Glyphicons مربوطه رو نشون نمیده و فقط منو محو میشه و با کلیک روی نقطه مشخص ظاهر میشه. کجا باید تغییرات اعمال کنم؟
سلام. باید با CSS به اون خطوط رنگ بدید
salam …
قدم سوم بخش دومش که تموم میشه ، چرا قدم چهارم رو نداریم ! هرچی میزنم باز ترتیبا ب هم میریزه … قدم چهارم دو بخشه که هیچ کدوم رو نمیشه باز کرد … یهو میره آموزش حلقه ها
سلام بهار جان. بله شما درست می گید من فراموش کرده بودم ترتیب هارو بزارم. لطفا مطالب مربوط به آموزش طراحی پوسته رو در این لینک دنبال کن:
آموزش طراحی قالب وردپرس
سلام
۲ تا سوال
۱- این کد و کجا باید قرار داد ؟
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 رو میشه داخل سایت آپلود کنید
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس