بلاگ تمز-دانلود قالب بلاگ بیان،قالب و افزونه وردپرس
  • صفحه نخست
  • وبلاگ
  • فروشگاه
  • مرکز آموزش
  • حریم خصوصی
  • ورود / عضویت
  • فراموشی گذرواژه

آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب

  • خانه
  • آموزش بلاگ بیان
  • آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
ج.محمد فروردین ۱, ۱۳۹۸ آموزش بلاگ بیان، مقالات آموزشی ۰ نظر

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

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

تگ <box:post_list> به بلاگ میگه باکس لیست مطالب ازاینجا شروع می شود واگر این وبلاگ دارای مطلب هست هرچی متن وتگ بین ما هست را نشون بده درغیر اینصورت بخیال من برو برای نمایش بعدی واین باکس هم با تگ </box:post_list> بسته می شود.

در قالب های بلاگ بیان تگ <box:xyz> تگ های شرطی هستند یعنی اگر باکس مورد نظر وجود داشت محتویات رو نشون بده در غیر اینصورت بخیال . پس هر چی می خواهیم در باکس لیست مطالب مان نشون داده بشه باید داخل همین تگ بنویسیم. این تگ ، تگ ِ مادر برای نمایش باکس لیست مطالب هست و برای اینکه مطالب وبلاگ لیست شوند (نمایش داده شوند) باید از تگ  نمایش لیست مطلب استفاده کنیم که بدین صورت می باشد <view:post_list>  و بسته این تگ هم </view:post_list> هست.

تمام محتویات داخل این تگ برای نمایش هرمطلب تکرار می شود. مثلا شما ۱۰ مطلب داشته باشید این تگ ۱۰ بار اجرا میشه تا لیست مطالب رو نشون بدهد.در قالب های بلاگ به تگ های که بصورت <view:xyz> هستن تگ های تکرار می گویند یعنی به ازای هر آیتم تکرار می شوند.
تعداد دفعات تکرا این تگ قابل تنظیم می باشد. (بعدا در بخش جدا مطالب جزئی گفته خواهد شد).

همچنین بخوانید  Microdata و تاثیر آن بر سئو

دراین قسمت ما به چه تگ های نیاز داریم:
تگ نویسنده مطلب (*post_author*)
تاریخ مطلب (*post_date*)
عنوان مطلب (*post_title*)
باکس برچسب های مطلب <box:post_tags></box:post_tags>
باکس موضوعات مطلب <box:post_categories></box:post_categories>
خلاصه مطلب (*post_summary*)
تصویر مطلب (*post_image*)
تعداد نظرات (*post_comment_count*)
باکس رتبه دهی به مطالب <box:post_rating></box:post_rating>

لینک مطلب (*post_link*) برای نمایش جداگانه مطلب در صفحه مخصوص آن مطلب (همون ادامه مطلب یا بیشتر بخوانید).

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

چینش باکس مطلب ( برای نمایش لیست مطلب در صفحه نخست ) مانند تصویر زیر هست.

هدر یا سربرگ باکس مطلب شامل : عنوان مطلب،نویسنده،تاریخ ایجاد،تعداد نظرات و رتبه دهی به مطلب می باشد.

فوتر یا پانویس باکس مطلب شامل : برچسب های مطلب،موضوعات و لینک به ادامه مطلب می باشد.

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

تگ‌های مرکب،تگ‌هایی هستند که مانند تگ‌های html تگ باز و بسته دارند و داخل آنها می‌تواند متن و یا تگ‌های دیگر قرار بگیرد، مانند <box:post_list></box:post_list> در این نوع تگ‌ها علامت / که قبل از نام تگ قرار می‌گیرد، نشان‌گر بسته شدن تگ می‌باشد.

در قالب های بلاگ سه نوع تگ های مرکب وجود دارد :

  • تگ های باکس  که به شکل   <box:xyz> </box:xyz>
  • تگ های نمایش تکراری  به شکل  <view:xyz>  </view:xyz>
  • تگ  های شرطی  <check:if>  </check:if>

توضیح : مقدار برخی تگ ها در قالب های بلاگ می تواند خالی باشد. مثلا وقتی شما مطلبی را منتشر می کنید شاید آن مطلب تصویر نداشته باشد برای اینکه بررسی کنیم آیا  مطلب دارای تصویر هست (اگر بود تصویر رو نشان بده) یا نه (می توانیم  انتخاب کنیم یه تصویر پیشفرض بارگذاری بشه یا  هیچی)از این تگ استفاده می کنیم. بصورت زیر :

<check:if post_image>
<img src="(*post_image*) alt="">
</check:if>
<ceck:if not post_image>
تصویر برای نمایش وجود ندارد 
</check:if>

شروع کدنویسی باکس لیست مطالب قالب بلاگ بیان

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

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

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

همچنین بخوانید  تگ های قالب بندی متن

گام اول : نوشتن کد باکس اصلی

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
</main>
<!-- پایان باکس اصلی -->

گام دوم : افزودن کد لیست مطالب به باکس اصلی

همانطور که در تصویر بالا می بینید لیست مطالب داخل یه باکس قرار گرفته تا مطالب منتشرشده منظم باشند.
با استفاده از تگ اچ تی ام ال ۵ <SECTION></SECTION> این کار را انجام می دهیم.

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
	<!--شروع باکس خلاصه مطلب / لیست مطالب-->
<box:post_list>
<section id="post_list" class="posts"></section>
	</box:post_list>
	<!--/پایان باکس خلاصه مطلب -- لیست مطالب-->
</main>

گام سوم : افزودن تگ و کد مربوط به نمایش یک مطلب (به ازای هر تعداد مطلب تکرار می شوند)

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
	<!--شروع باکس خلاصه مطلب / لیست مطالب-->
	<box:post_list>
		<section id="post_list" class="posts">
		<!-- شروع نمایش لیست مطلب : هر چقدر مطلب داشته باشید تموم کد و تگ های داخل تگ زیر به همان اندازه تکرار می شوند-->	
<view:post_list>
				<article class="post">
					</article>
			</view:post_list>
<!-- پایان نمایش لیست مطالب -->
		</section>
	</box:post_list>
	<!--/پایان خلاصه مطلب -- لیست مطالب-->
</main>
<!-- پایان باکس اصلی-->

گام پایانی: افزودن جزئیات و تگ های مربوط به یک مطلب در بلاگ بیان

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
	<!--شروع باکس خلاصه مطلب / لیست مطالب-->
	<box:post_list>
		<section id="post_list" class="posts">
			<view:post_list>
				<article class="post">
					<header class="post_header">
						<h3 class="post_title"><a href="(*post_link*)">(*post_title*)</a></h3>
						<ul class="post_meta--header post_meta">
							<li class="post_author">توسط : <span>(*post_author*)</span></li>
							<li class="post_date">در <span>(*post_date*)</span></li>
							<li class="post_comment_count">دیدگاه  <span>(*post_comment_count*)</span></li>
							<li class="post_rate">
								<box:post_rating>
									<span class="rate-box (*user_rated*)">
										<span class="rate-button-box rate-up (*user_rated_up*)">
											<a class="rate-button" href="(*rate_up_link*)" rel="nofollow" title="موافق">
												<img alt="موافقین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">
												(*up_rates*)
											</a>
										</span>
										<span class="rate-button-box rate-down (*user_rated_down*)">
											<a class="rate-button" href="(*rate_down_link*)" rel="nofollow" title="مخالف">
												<img alt="مخالفین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">
												(*down_rates*)
											</a>
										</span>
									</span>
								</box:post_rating>
							</li>
						</ul>
						<check:if post_image>
							<figure class="post_image">
								<img src="(*post_image*)" alt="(*post_title*)">
							</figure>
						</check:if>
					</header>
					<!--\پایان هدر باکس مطلب-->
					<div class="post_summary">(*post_summary*)</div>
					<!-- \پایان خلاصه مطلب-->
					<footer class="post_footer">
						<ul class="post_meta--footer post_meta">
							<box:post_tags>
								<li class="post_tags">
									<span>برچسب ها : </span>
									<view:post_tags><a href="(*tag_link*)">(*tag_name*)</a></view:post_tags>
								</li>
							</box:post_tags>
							<!-- پایان برچسب های مطلب-->
							<box:post_categories>
								<li class="post_cats">
									<span>موضوع :</span>
									<view:post_categories>
										<a href="(*category_link*)">(*category_name*)</a>
									</view:post_categories>
								</li>
							</box:post_categories>
							<!--\پایان موضوعات مطلب-->
							<check:if post_has_read_more>
								<li class="readmore"><a href="(*post_link*)">ادامه مطلب</a></li>
							</check:if>
						</ul>
					</footer>
				</article>
			</view:post_list>
		</section>
	</box:post_list>
	<!--/پایان خلاصه مطلب -- لیست مطالب-->
</main>

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

vote
رتبه دهی مطلب
همچنین بخوانید  آموزش ساخت قالب بلاگ بیان : بخش اول ساختار فایل ها
دانلود قالبدانلود قالب بلاگ بیانقالب بلاگ بیان
دانلود قالب بلاگ بیان حرفه ای و ریسپانسیومطلب قبلی
افزونه نمایش استوری بلاگ بیانمطلب بعدی
اشتراک
اطلاع از
Please login to comment
0 نظرات
Inline Feedbacks
View all comments

خوب است بدانید

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

آخرین محصولات مارکت

  • قالب ریسپانسیو زمستان بلاگ بیان

    دانلود قالب ریسپانسیو زمستان بلاگ بیان

    ۳۹,۰۰۰ تومان
  • مطالب مرتبط بلاگ بیان

    مطالب مرتبط بلاگ بیان

    ۱۵,۰۰۰ تومان
  • قالب نوشتار بلاگ بیان

    قالب نوشتار بلاگ بیان

    ۳۰,۰۰۰ تومان
  • قالب مجله و خبری بلاگ بیان

    قالب مجله و خبری بلاگ بیان ماهتاک

    ۴۷,۰۰۰ تومان
  • قالب انحنای بلاگ بیان

    قالب انحنا بلاگ بیان

    امتیاز 5.00 از 5
    ۴۵,۰۰۰ تومان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان فروردین ۲۴, ۱۳۹۹
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل مرداد ۲۲, ۱۳۹۸
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان مرداد ۸, ۱۳۹۸
  • استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده
    استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده تیر ۲۳, ۱۳۹۸
  • قالب مجله ای و خبری ماهتاک بلاگ بیان
    قالب مجله ای و خبری ماهتاک بلاگ بیان تیر ۱۷, ۱۳۹۸
  • قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان
    قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان تیر ۷, ۱۳۹۸
  • راهنمای قالب انحنا بلاگ بیان
    راهنمای قالب انحنا بلاگ بیان تیر ۱, ۱۳۹۸
  • افزونه نمایش استوری بلاگ بیان
    افزونه نمایش استوری بلاگ بیان اردیبهشت ۴, ۱۳۹۸
  • آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
    آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب فروردین ۱, ۱۳۹۸
  • دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو
    دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو بهمن ۳, ۱۳۹۷

دسته های محصولات

  • اسکریپت
  • افزونه بلاگ بیان
  • افزونه وردپرس
  • پروژه کامپیوتر
  • دسته بندی نشده
  • سئو
  • سورس نرم افزار آندروید
  • شرکتی
  • قالب HTML
  • قالب بلاگ بیان
  • قالب وردپرس
  • ووکامرس

سوالات متداول

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

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان
  • نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
    نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان
©۱۳۹۷ بلاگ تمز ساخته شده با ♥؛ توسط تیم ماکاوب با استفاده از وردپرس و ووکامرس.
0
0
Would love your thoughts, please comment.x
()
x
| Reply