رفتن به مطلب

آموزش قدم به قدم طراحی پوسته وردپرس از مبتدی تا پیشرفته


پست های پیشنهاد شده

  • 4 ماه بعد...

سلام

شرمنده دوستان یه مدت به خاطر بیماری نبودم و نشد ادامه بدم اگه خدا بخواد دوباره ادامه میدم

بازم شرمنده

  • امتیاز 26
لینک به ارسال
  • 2 هفته بعد...

سلام

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

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

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

خب توی پست های قبلی تا قسمت منو پیش رفتیم و تقریبا میشه گفت یه هیدر ساده ساختیم و با توابعی مثل 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 برای بردن به سمت چپ

که اگر درست انجام داده باشید باید یه همچین چیزی در بیارید :

post-403-0-38286400-1394624147_thumb.jpg

خب حالا میریم سراغ این قسمت و شرح محتوا و پست ها و .... :

توی این قسمت میایم با استفاده از تگ 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
}

خب حالا اگر همه چیو به درستی انجام داده باشید باید یه چیزی مثل این داشته باشید :

post-403-0-20910300-1394625979_thumb.jpg

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

در آخر با هم تاکید میکنم که هیچ کدوم از این کدهارو کپی و پیست نکنید و سعی کنید خودتون همرو تایپ کنید.

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

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

بپرسید حتی اگر ربطی به وردپرس نداشت مثلا شرط ها در php یا حلقه ها در php و ...

تا قسمت بعد موفق باشید.

  • امتیاز 48
لینک به ارسال
  • Morteza unpinned this موضوع
مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...