این ارسال پرطرفدار است. kasra 4929 ارسال شده در مهر 92 این ارسال پرطرفدار است. گزارش بازنشر ارسال شده در مهر 92 سلام به همه کاربرایِ عزیز وردپرس پارسیامیدوارم که حالتون خوب باشه ،خیلی وقت بود قصد داشتم آموزش کامل طراحی قالب وردپرس از مبتدی تا پیشرفترو بزارم چون بعضی جاها دیده بودم که با بی انصافی و .... پوسته هایی که ارزش چندانی ندارن رو با قیمت های میلیونی به کاربر از همه جا بی خبر میفروختند.اما یه کم مشکل داشتم و دسترسی به pc نداشتم و خدارو شکر الآن میتونم این کارو شروع کنم.-----------------------------------هر کسی که با وردپرس آشنا میشه و با اون کار میکنه از سادگی و قدرتمند بودنش لذت میبره و علاقه مند میشه تا همیشه با اون کار کنهاولین چیزی که به ذهنش میرسه اینه که خودش برای سایتش پوسته طراحی بکنه ولی وقتی به قسمت پوسته سایت میره با دیدن تکه تکه بودن فایل های قالب وردپرس تقریبن نا امید میشه چون فک میکنه خیلی خیلی سخته و .....اما بهتره به همه اونایی که همچین ذهنیتی براشون ایجاد شده بگم که یکی از بهترین و فک کنم مهمترین ویژگی این بخش اینه که فایل ها و قسمت های پوسته وردپرس از هم جدا هستن و تکه تکه هستن چون هم در موقع طراحی کار رو ساده تر میکنه و هم در موقع تغییر یا رفع مشکل یا ....یکی دیگه از مزیت های تکه تکه بودن اینه که سرعت بارگذاری سایت و پوسته بالا میره !توی این تاپیک تصمیم گرفتم از مبتدی ( یعنی اولین باری که میخواید برای وردپرس پوسته بزنید ) تا پیشرفته و حرفه ای پیش بریم که بتونید به صورت کامل یک پوسته رو طراحی کنید ، که اگر مشکلی پیش نیاد ، به امید خدا تا آخرش همراهتون هستم .-----------------------------------ما در اینجا فرض رو بر این میگیریم که شما html و css رو در حدودی آشنایی دارید ( آموزشش رو هم در تاپیک دیگه توسط Black_sky آموزش داده میشه که بتونید از psd به html تبدیل کنید )خب ببینید طراحی پوسته وردپرس خیلی خیلی آسونه طوری که شما خودتون در آخر میبینید که کاش از همون اول خودتون میرفتید و شروع میکردید از بس که ساده و راحت بوده !!!برای شروع موارد زیر رو لازم دارید :آشنایی حدود 20% با html و css که فقط بتونید کدهارو بشناسید و استفاده کنید2 - یک نرم افزار ++notepad3 - یک نرم افزار وب سرور مثل wampp یا xampp یا easyphp که من xampp رو که کامل هست پیشنهاد میدم ولی چون مبتدی هستید نرم افزار easyphp رو نصب کنید که کار باهاش خیلی خیلی راحته ( آموزش های زیادی در گوگل هست )4 - منتظر چیز دیگه ای بودید ؟ فقط کمی همت و پشتکار + علاقـــــــــــــــــــــــــــــــــــــــــــــــه همین !-----------------------------------حالا میریم سراغ کدها و ....خواستم خودم همه کدهای وردپرس رو توضیح بدم و همه تگ ها و ... که دیدم هم تاپیک خیلی طولانی میشه و هم اینکه وقت رو میگیره و ممکنه من نتونم زیاد واضح و کارا در مورد تگ ها توضیحات بدم و از گیج شدن کاربر جلوگیری بشهپس شما اول باید با توابع وردپرس آشنا بشید که بهترین و به روزترین مرجع خود وردپرس هست در این آدرس :http://codex.wordpress.orgخب نیازی نیست زیاد خودتون رو درگیر فهمیدن تگ ها و توابع وردپرس کنید چون در هر جا که بهشون برسیم توضیح مختصر میدم و لینک به مرجع و توضیحات کاملش رو میزارم که آموزش کامل و 100% باشه این صفحرو هم معرفی کردم تا بتونید آشنا بشید.------------------ خیــــــلی مــهــم -----------------تا اینجا همه چی برای شروع آمادست اما یه چیزای خیـــــــــــــــــــــــــــــــلی خیــــــــــــــــــــــــلی مهمی هست که من از طرف خودم میگم که بهتون قول میدم اگر رعایت کنید یکی از بهترین طراحای وردپرس بشید !1 - سعی کنید ( باید ) همیشه کدهایی که لازم دارید رو تایپ کنید و هرگز و هرگز از copy و paste استفاده نکنید .2 - اگر جایی به مشکل بر خوردید نا امید نشید چون اگر قرار بود مشکل حل نشه هیچوقت به وجود نمی اومد ( رابطه علت و معلول )3 - همه فک میکنن که با خوندن کتاب و آموزش و ... میتونن یاد بگیرن اما سخت در اشتباهن چون شما هزاران کتاب رو هم از حفظ باشی بازم چیزی نمیدونی چون مهمترین و مهمترین چیز در یادگیری ، تمرین ، تمرین و تمررررین هستش !4 - هیچوقت و هیچوقت از نرم افزارهای آماده طراحی مثل دریم ویور و .... استفاده نکنید چون کم کم نابودتون میکنه !5 - علاقه فراموش نشه و مطمعن باشید اگر چیزی رو یاد بگیرید اون رو دوست خواهید داشت !6 - همیشه یادتون باشه سخت ترین راه ها بهترین راه ها هستن پس هیچوخ از سختی کار ناراحت نشید .-----------------------------------تو این تاپیک تقریبن هر روز یه پست آموزشی میزارم تا بعد از پست برید و تمرین کنید تا فردا برای بخش دیگش آماده بشید .بعد اینکه آموزش هارو به صورت تصویری میزارم و در آخر هم همرو تبدیل به یه کتاب میکنم ( pdf ) و میتونید به صورت یه جا کل آموزش رو دانلود کنید.تو این تاپیک فقط آموزش قرار داده میشه و خواهشن پست سوالی مشکل ارسال نکنید یه تاپیک دیگه میسازم برای سوال هاتاپیک رفع مشکلات رو از لینک زیر میتونید ببینید : تاپیک رفع مشکلات و سوالات مربوط به آموزش طراحی پوسته وردپرسامیدوارم بتونید با این آموزش خودتون پوسته سایتتون رو طراحی کنید.به امید خدا از پست بعدی آموزش رو شروع میکنم. 67 لینک به ارسال
این ارسال پرطرفدار است. kasra 4929 ارسال شده در مهر 92 مالک این ارسال پرطرفدار است. گزارش بازنشر ارسال شده در مهر 92 آموزش اول ( مقدمه و آشنایی ) :خب همونطور که تو پست قبلی گفتم پوسته وردرس به صورت تکه تکه هست که مزیت های خیلی زیادی داره از جمله رفع مشکل یا تغییرات در آینده و همینطور افزایش سرعت بارگذاری سایتفایل هایی که برای یک پوسته نیازمندیم به صورت معمولی :header.php :قسمت هیدر سایت و فایل های style و جاوا و توضیحات سایت و ... که مهمترین بخش یک سایت همین فایلهindex.php :صفحه اصلی سایت مختص این فایلهsidebar.php :قسمت ستون کناری وب سایتfooter.php : قسمت کپی رایت و متن های مختص وب سایتو فایل استایل که به نام style.css باید باشهدر تصویر زیر بهتر میتونید ببینید که این فایل ها مربوط به کدوم قسمت میشه :خب اینا فایل های اصلی یک پوسته هستنیک فایلی به نام single.php هم باید درست کنید که مربوط به قسمت ادامه مطالبتون هستشفایل های دیگه ای هم هستن برای پوسته مثل home.php یا front-page.php یا page.php یا comments.php یا فایل معروف functions.php و ....... که برای شروع به اینا احتیاج نداریم اما در آموزش حتمن به این فایل ها هم اشاره میکنیم که برای چی هستن و ...برای شروع وب سرور که در پست اول گفتم نصب کردید رو اجرا کنید و وردپرس رو داخل شاخه روت ( اگر از easyphp استفاده میکنید داخل www و اگر از xampp استفاده میکنید داخل htdocs ) نصب کنیدبعد به قسمت پوسته ها در :wprdpress\wp-content\themesبرید و یه پوشه ایجاد کنید و اسمشو هرچی که میخواید بزارید که من اینجا اسم پوشرو mythem میزارم .داخل پوشه پوسته فایل هاییرو که گفتم رو ایجاد کنید که الآن شما باید این فایل هارو داشته باشید :خب بعد از اینکه این فایل هارو ایجاد کردید ، فایل style.css رو با نوت پد ویندوز یا ++notepad باز کنید و در اول اون کدهای زیر رو وارد کنید :/*Theme Name: mythemTheme URI: http://www.wp-parsi.comDescription: amouzeshe tarahi pouste wordpressversion: V1.0Author: Kasra.GHAuthor URI: http://www.doweb.ir*/بعد ذخیره کنید و به مدیریت و قسمت پوسته ها برید که باید عکس زیر رو ببینید :خب حالا روی فعال کردن کلیک کنید تا پوسته رو فعال کنید.تا اینجا شما مقدمه طراحی و ساخت قالب رو آماده کردید و بعد از این میریم سراغ کد نویسی و شروع طراحی :---------------------------------------همونطور که تو پست اول گفتم ما فایلی به اسم header.php داریم که تمام مشخصات اصلی سایت مثل عنوان سایت ، توضیحات ، کلمات کلیدی ، فایل های استایل و .... تو این فایل قرار داده میشن .برای شروع فایل header.php رو با ++notepad باز کنید و نوع صفحه و ... رو بهش معرفی میکنیم که html هست و ... :<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title(); ?></title> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <link type="text/css" href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" media="screen" /> <?php wp_head(); ?> </head><body>توی این کد همه چی مشخصه و در همه جا حتی وبلاگ هاهم این کدها استفاده میشه به جز استفاده از یک دستور :<?php wp_head(); ?>توضیحات مختصر :این دستور باید در تمامی پوسته هایی که طراحی میکنید وجود داشته باشه کارش اینه که فایل های لازم برای وردپرس مثلن برای نمایش تولبار سایت یا برای لود کردن فایل هایی js یا css که افزونه ها به قسمت header اضافه میکنن و ... رو فراخوانی میکنه.و برای اطلاعات بیشتر در مورد این دستور به این بخش مراجعه کنید :http://codex.wordpress.org/Function_Reference/wp_headکد دیگه ای که اضافه کردیم این هست :<link type="text/css" href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" media="screen" />وظیفه این کد فراخوانی فایل style.css پوسته شماست که باید برای نمایش صحیح پوسته استفاده بشهکد دیگه این هست :<meta name="description" content="<?php bloginfo( 'description' ); ?>">وظیفه این کد فراخوانی توضیحات مربوط به سایت هست که از قسمت مدیریت وارد کرده اید .کدهای دیگه هم که مشخصه title برای عنوان سایت و charset برای مشخص کردن زبان سایت شما هست.حالا ما باید هیدر سایتمون رو درست کنیم که جای قرارگیری لوگو و ... هستش که به ترتیب میریم جلوبعد از تگ body یک آیدی ایجاد کنید مثل :<header id="header">header</header>و فایل رو ذخیره کنید .حالا باید برای فایلی که ایجاد کردیم استایل بنویسیم ،فایل style.css رو باز میکنیم و استایل کلی صفحمونو هم وارد میکنیم به این صورت :body { background:#fff; font:normal 11px tahoma; direction:rtl; text-align:right; margin:0; padding:0;}و حالا استایل دلخواه رو برای آیدی header که ساختیم مینویسیم که من به این صورت نوشتم :( البته شما میتونید به صورت دلخواه هر نوع استایلی خواستید بنویسید )#header { background:#f5f5f5; width:950px; height:200px; border-bottom:1px solid #ccc; margin:0 auto;}حالا فایل رو ذخیره کنید و به صفحه اول سایتتون برید تا چیزی که ساختید رو ببینید.خب الآن مطمعنن شما چیزی ندیدید و با یه صفحه سفید روبرو شدید ، درسته ؟این به این خاطر هست که شما باید فایل هیدرتون رو فراخوانی کنید تا نمایش داده بشهبرای این کار فایل index.php رو باز کنید و در اول اون تابع :<?php get_header(); ?>رو اضافه کنید .توضیحات مختصر تابع :این دستور همونطور که از اسمش مشخصه فایل header.php رو فراخوانی میکنه و وصلش میکنه به index.php که اگر یادتون باشه گفتیم فایل های پوسته وردپرس تکه تکه هستن که به این روش اون هارو به هم وصل میکنیم.اطلاعات بیشتر از مرجع اصلی :http://codex.wordpress.org/Function_Reference/get_headerخب بعد از افزودن این کد به صفحه اول سایتتون برید و ببینید که اگر طبق کدهای من نوشته باشید باید شبیه زیر باشه :فایل رو ذخیره کنید و ببندید ، تا اینجا ما قسمت اطلاعات هیدر سایتمون و یک هدر رو آماده کردیم .برای این آموزش تا به این جا بسته چون شما باید با همه این کدها و گفته ها کار کنید و با تک تک کدها آشنا بشید و همینطور اینکه فایل ها و استایل هارو با توجه به چیزی که دوست دارید تغییر بدید و اگر مشکلی بود در تاپیک مشکلات که تو پست اول لینک دادم مطرح کنید تا برطرف کنیم و بعد بریم سراغ قسمت بعدی آموزش.فایل هایی که تو این آموزش ساختیم رو هم قرار میدم تا دانلود کنید :mythem.zipیادآوری مهم : هیچکدوم از این کدهارو copy و paste نکنید و همرو خودتون تایپ کنید . 84 لینک به ارسال
این ارسال پرطرفدار است. kasra 4929 ارسال شده در مهر 92 مالک این ارسال پرطرفدار است. گزارش بازنشر ارسال شده در مهر 92 سلامخب امیدوارم که حالتون خوب باشهآموزش رو ادامه میدیم :تو قسمت قبل ما هدرمون رو آماده کردیم و با توابعی مثل wp_head آشنا شدیم و تونستیم قسمت هیدر سایتمون رو طراحی کنیم اما توی هیدر معمولن لوگو و یه فرم جستجو هستش که برای قرار دادن اونا باید اینطوری عمل کنیم :برای خود هدر از تگ header استفاده کردیمحالا در این تگ یک div باز میکنیم و کلاس اون رو logo میزاریم به شکل زیر :<div class="logo"></div>یک لوگو طراحی میکنیم ( در آخر ضمیمه میکنمکا برای اینکه توی وبسایتمون بتونیم تصاویر رو استفاده کنیم باید در شاخه پوستمون یک پوشه به نام images ( اسمش مهم نیست) درست کنیم و عکس هامون رو در داخل اون بزاریمفایل لوگو که طراحی کردید رو در داخل این پوشه بزارید و در فایل css به اون استایل میدیم تا در وب نمایش داده بشهبه این صورت :.logo{background: url('images/logo.png') no-repeat;width:230px;height:110px;float:right;margin:15px 0 0 0;}همونطور که در کد میبینید ما عکسمون رو بهش معرفی کردیم و با خاصیت float:right اون رو به سمت راست بردیمحالا فایل هارو ذخیره کنید و سایت رو مشاهده کنید که اگر درست انجام داده باشید باید به شکل زیر نمایان بشه :خب تا اینجا لوگومون رو هم در هدر قرار دادیمحالا میریم سراغ فرم جستجو که یکی از مهمترین قسمت های یک سایت به حساب میاد :برای شروع به خود وردپرس مراجعه کنید و آشنا بشید تا توضیح بدم :http://codex.wordpress.org/Function_Reference/get_search_formخب توی صفحه به صورا کامل با نمونه و کد آماده توضیح داده شده که خیلی سادست و چیزی نداره و همش برمیگرده به html و توضیح نمیخوادبه صورتی که گفته ما هم استفاده میکنیمقبلش شما باید در header.php مکان قرارگیری فرم جستجورو مشخص کنید برای این کار یک div در داخل تگ header ایجاد میکنیم و اسم اون رو search میزاریم :<div class="search"></div>حالا باید به این کلاسمون استایل بدیممن به این صورت استایل دادم که بره سمت چپ قرار بگیره :.search{width:310px;float:left;margin:105px 0 0 0;}کد خیلی سادست و نیاز به توضیح ندارهحالا باید فرم جستجو رو داخل این قسمت بزاریم ( طبق همون بالا میتونید نحوه نوشتن فرم رو ببینید )کدی که من استفاده کردم به این صورت هست :<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"><div><input type="text" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" placeholder="جستجو ..."/><input type="submit" id="searchsubmit" value="Search" class="submit_input" /></div></form>خب فرممون به همین شکل زیاد جالب نیست و میایم یه کم بهش استایل میدیم تا بهتر بشهاستایلی که من بهش دادم به این شکل هست :.search input[type="text"]{border:1px solid #ccc;width:250px;padding:3px 5px;}.search input[type="submit"]{background:#7ba60d url(images/search_icon.png) no-repeat 50%;text-indent: -3000em;border:1px solid #008800;border-radius:3px 0 0 3px;margin:3px -5px 0 0;width:26px;padding:2px 5px;}خب حالا فایل هارو ذخیره کنید و سایت رو ببینید که باید به این شکل باشه :خب اینجا ما هدرمون رو کامل طراحی کردیم البته کامل از نظر آموزشی وگرنه توی هدر خیلی چیزها میتونه باشه که بستگی به طراح و نیاز خود کاربر دارهحالا میریم سراغ ساخت یه منو بالای سایت که چند تا هم لینک داخلش باشه برای دسترسی به قسمت های مختلف سایت :برای ایجاد این منو از تگ nav استفاده میکنیم و کلاس منو رو بهش میدیم :<nav class="menu"></nav>و در css به اون استایل میدیم :.menu {border:1px solid #ccc;margin:10px auto;width:960px;padding:10px 5px;}حالا بستگی داره بخواین تو این منو چه چیزیرو نمایش بدین اگر به صورت دستی میخواین لینک قرار بدین به این صورت باید باشه :از تگ li استفاده میکنیم و چند نمونه میزاریم :<li><a href="/"> صفحه اصلی </a> </li><li><a href="/wp-login.php"> ورود به سایت </a> </li><li><a href="/about"> درباره ما </a> </li><li><a href="/contact"> ارتباط با ما </a> </li>حالا در css به اون استایل میدیم :.menu li{float:right;list-style:none;margin-left:10px;font:normal 11px tahoma}خب فایل هارو ذخیره کنید و سایت رو ببینیداگر درست انجام داده باشید باید سایت به این شکل باشه :ما اینجا به صورت دستی لینک هارو وارد کردیم ولی اگر شما خواستید مثلن صفحاتی که میسازید رو در این منو نمایش بدید باید به صورت زیر استفاده کنید :<?php wp_list_pages('title_li='); ?>این کد هر جا که استفاده بشه لیست صفحات شمارو نمایش میدهبرای اطلاعات بیشتر به خود وردپرس مراجعه کنید که بهترین منبع برای توضیح به صورت کامل هست:http://codex.wordpress.org/Function_Reference/wp_list_pagesخب شاید در حین کار به مشکل بخورید که وقتی از خاصیت float استفاده کردید کلاس ها به هم ریختنبرای رفع این مشکل ، فایل استایل رو باز کنید و یک کلاس بنویسید به این صورت :.clearfix{clear:both}بعد از هر div که خواستید بهش خاصیت float بدید برای جلوگیری از به هم ریختن صفحه یک div ایجاد کنید و به اون کلاس clearfix بدید تا درست بشهخب تا اینجا ما یک منو هم برای وب سایت درست کردیم که اگر کمی خلاق باشید میتونید خیلی چیزای دیگه هم ایجاد کنیدمثلن من تاریخ رو هم به منو اضافه کردم که تو سمت چپ نمایش داده بشه که برای این کار :یک div ایجاد کنید و به اون کلاس date بدید به این صورت :<div class="date"></div>حالا در css به اون استایل میدیم تا بره سمت چپ :.date {float:left;}برای نمایش تاریخ هم باید از کد زیر استفاده میکنیم :امروز <?php echo date ('l, j F , Y') ; ?>این کد تاریخ رو به صورت میلادی نمایش میده که برای نشون دادن تاریخ شمسی اول باید افزونه جلالی رو نصب و فعال کنید و بعد از کد زیر استفاده کنید :امروز <?php echo jdate ('l, j F , Y') ; ?>برای اطلاعات بیشتر :http://codex.wordpress.org/Formatting_Date_and_Timeو :http://codex.wordpress.org/Function_Reference/the_dateخب اگر کار رو درست انجام داده باشید باید سایتتون به این شکل در اومده باشه :--------------------------------------------خب برای امروز هم کافیه و امیدوارم تونسته باشید چیزی یاد بگیریدبرید تمرین کنید و اگر مشکلی نبود میریم سراغ صفحات سایت و نمایش مطالب و حلقه ها و ........یادآوری مهم : هیچکدوم از این کدهارو copy و paste نکنید و همرو خودتون تایپ کنید . 55 لینک به ارسال
kasra 4929 ارسال شده در اسفند 92 مالک گزارش بازنشر ارسال شده در اسفند 92 سلامشرمنده دوستان یه مدت به خاطر بیماری نبودم و نشد ادامه بدم اگه خدا بخواد دوباره ادامه میدمبازم شرمنده 26 لینک به ارسال
kasra 4929 ارسال شده در اسفند 92 مالک گزارش بازنشر ارسال شده در اسفند 92 سلامامیدوارم که حالتون خوب باشه و همیشه سلامت باشید.قبل از شروع ادامه آموزش ، بگم که یه وقفه طولانی افتاد که به خاطر مشکلات من بود و از این بابت ازتون ماذریت میخوام و امیدوارم دیگه تا آخرش آموزش رو تموم کنم.در ضمن این قسمت فقط برای آموزش هست و هیچ پستی ندید !!! پست های اضافی پاک شدن ...خب توی پست های قبلی تا قسمت منو پیش رفتیم و تقریبا میشه گفت یه هیدر ساده ساختیم و با توابعی مثل list_pages برای نمایش صفحه ها و wp_head و date و ... به صورت ابتدایی آشنا شدیم و استفاده کردیم.رسیدیم تا قسمت منوها و هیدر تکمیل شد و حالا بسته به خودتون میتونید قسمت هیدر رو پیشرفته تر و ... کنید که ما اینجا فقط میخوایم بگیم که چطوری یک پوسته وردپرس تشکیل میشه اونم به ساده ترین روش ممکن !خالا میرسیم به محتوای داخلی سایت :برای محتوای داخل سایت میایم یک محتوای 2 ستونه تشکیل شده از سایدبار و قسمت مطالب ایجاد میکنیم.فایل index.php رو باز کنید و با استفاده از :<?php get_header() ?>هیدری که ساختید رو فراخوانی کنید.بعد از اون باید قسمت مطالب رو ایجاد کنیم که با استفاده از تگ :<article> محتوا </article>اون رو ایجاد میکنیم و در css به اون استایل میدیم :article { background:#fff; width:690px; border:1px solid #ccc; float:left; padding:5px;}تو این استایل ما اومدیم رنگ پس زمینه رو سفید گذاشتیم و اندازه عرض رو 690 و خاصیت float برای بردن به سمت چپکه اگر درست انجام داده باشید باید یه همچین چیزی در بیارید :خب حالا میریم سراغ این قسمت و شرح محتوا و پست ها و .... :توی این قسمت میایم با استفاده از تگ section پست هارو تعریف میکنیم به این صورت یک کد مینویسیم :<section class="posts"><?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2><?php the_excerpt(); ?><?php endwhile; ?><?php endif; ?></section>حالا توضیح کدها :همونطور که میبینید به تگ sectiuon اومدیم کلاس posts دادیم :که در css میتونید به اون خاصیت بدید به هر شکلی که میخواید.<section class="posts">.......به اون در css استایل میدیم به این صورت :.posts { font:normal 11px tahoma; color:#555; line-height:21px;}بعد اومدیم مهمترین قسمت یعنی حلقه مطالب وردپرس رو ایجاد کردیم که به ترتیب اولش یک شرط هست که میگه اگر پست داشتیم :<?php if(have_posts()) : ?>اونارو با استفاده از حلقه برایما نمایش بده یعنی این :<?php while(have_posts()) : the_post(); ?>اطلاعات بیشتر در این مورد :https://codex.wordpress.org/The_Loopبرای حلقه مطالب یا همون لوپو :https://codex.wordpress.org/Function_Reference/have_postsبرای وجود مطالب با استفاده از شرطخب ،بعد اومدیم قسمتی که از پست ها میخوایم رو فراخوانی کنیم که من در ابتدا عنهوان مطلب رو داخل h2 میزارم به این صورت :<h2><?php the_title(); ?></h2>تو این کد عنوان مطلب رو نمایش میده که اگر بخواید عنوان همراه با لینک به مطالب باشه باید به صورت زیر استفاده کنید :<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>تو اینجا the_permalink وظیفه دریافت آدرس یا همون پیوند به مطلب رو دارهاطلاعات بیشتر در کدکس وردپرس :http://codex.wordpress.org/Function_Reference/the_permalinkخب حالا قسمت بعدی که خود مطلب هست رو فراخوانی میکنیم که باید به این صورت باشه :<?php the_content(); ?>اطلاعات بیشتر در :codex.wordpress.org/Function_Reference/the_contentولی من در کدها از خلاصه استفاده کردم به این صورت :<?php the_excerpt(); ?>که خلاصه مطلب رو بر حسب اون چیزی که خودتون تعریف میکنید فراخوانی میکنهاطلاعات بیشتر :codex.wordpress.org/Function_Reference/the_excerptالبته در این مورد خلاصه مطلب بعدا در صورت لزوم مفصل صحبت میکنیم البته سوالی هم داشتید بپرسید ( در تاپیک سوالات )خب حالا باید شرط و حلقمون رو ببندیم با این کدها :<?php endwhile; ?> // بستن حلقه<?php endif; ?> بستن شرطخب حالا سایتتونو نگاه کنید میبینید که مطالبتون نمایش داده میشهحالا شاید مطالبتون عنوانش که با h2 بود یه کم بد جلوه کنه که در css به اون خاصیت میدیم :.posts h2 a { font:bold 12px tahoma; color:#333; border-bottom:1px solid #ccc; padding-bottom:7px}خب حالا اگر همه چیو به درستی انجام داده باشید باید یه چیزی مثل این داشته باشید :خب فک کنم تا همین جا بست باشه و تمرین کنید تا خوب با قسمت پست ها آشنا بشید تا در قسمت بعدی سایدبار و ... رو هم اضافه کنیمدر آخر با هم تاکید میکنم که هیچ کدوم از این کدهارو کپی و پیست نکنید و سعی کنید خودتون همرو تایپ کنید.سوال مشکل و هرچی راجب این پست وحلقه و شرط و ... داشتید در تاپیک :تاپیک رفع مشکلات و سوالات مربوط به آموزش طراحی پوسته وردپرسبپرسید حتی اگر ربطی به وردپرس نداشت مثلا شرط ها در php یا حلقه ها در php و ...تا قسمت بعد موفق باشید. 48 لینک به ارسال
پست های پیشنهاد شده