همانطور که از عنوان درس مشخص هست در این درس قرار است که پست ها یا مطالب پوسته را قالب بندی کنیم. برای شروع رسمی درس به ادامه مطلب مراجعه کنید… در این درس شما به فایل index.php نیازی ندارید. موارد Xampp Control, فولدر پوسته, Firefox, و style.css را باز کنید. • مرحله ی اول: فایل style.css را باز کنید و در بالای کد body{} کد های زیر را وارد کنید: کد: body, h1, h2, h3, h4, h5, h6, blockquote, p{ margin: 0; padding: 0; } • توجه کنید که عبارت margin: 0; دقیقاً همان عبارت margin: 0 0 0 0; است. در حقیقت وقتی که تمامی مقادیر یکسان باشند، شما می توانید برای خلاصه نویسی از یک شماره استفاده کنید که این یک شماره برای تمامی حالت ها استفاده می شود. همین کار را برای padding هم استفاده کردیم. • فایل را save کرده و تغییرات را در مرورگر مورد نظر نگاه کنید. نکته: من به شما گفتم که کد مورد نظر را بالا یا پایین کدهای دیگر قرار دهید. اما بدانید که این ها همگی اختیاری هستند. شما می توانید کدها را در هر کجا تایپ کنید و یا قرار دهید، این کار را تنها برای سازماندهی و مدیریت بهتر کدها به شما گفتم. • مرحله ی دوم : حال زمان آن رسیده که عنوان پست ها (H1) را استایل دهیم، پس کدهای زیر را در پایین body{} تاپپ کنید: کد: h1{[/COLOR][/LEFT] [COLOR=#000000] [LEFT]font-family: Georgia, Sans-serif; font-size: 24px; padding: 0 0 10px 0; } » font-family: Georgia, Sans-serif; - این کد عنوان پست ها را از فونت Arial به Georgia تغییر می دهد. و در صورت نبود فونت Georgia، از فونت Sans serif استفاده می کند. »font-size: 24px; - این گزینه کاملاً واضح است. توجه کنید، شما اندازه ی فونت را در body{} مقدار ۱۲px تنظیم کردید، در صورتیکه تگ های H1 و H2 از این قانون یا این خط کد پیروی نمی کنند، بلکه تگ های heading از قانون خودشان پیروی می کنند. پس برای کنترل آنها، شما باید آنها را بصورت جداگانه قالب بندی کنید. »padding: 0 0 10px 0; - این کد به معنی این است که از ناحیه ی پایین H1 ده پیکسل فاصله بیافتد. این فضای ۱۰ پیکسلی را برای فضای بین عنوان وبلاگ ها و توضیحات وبلاگ مورد استفاده قرار خواهد گرفت. تغییرات را save کنید و آنرا مشاهده کنید. • مرحله ی سوم: کد های زیر را در زیر سلکتور #container{} تایپ کنید. (بعد از تغییر در هر بلاک و یا تایپ هر کد تغییرات را ثبت کرده و آنها را در مرورگر خود مشاهده کنید.) کد: .post{ padding: 10px 0 10px 0; } (شما با این کد ۱۰ پیکسل فاصله از ناحیه بالا و پایین به هر div برای هر پست اضافه کرده اید.) کد: .post h2{ font-family: Georgia, Sans-serif; font-size: 18px; } (سلکتور post h2 به طور ویژه sub-headings های H2 را فقط برای پست ها هدف گیری می کند، به زبان خودمان این سلکتور تنها به عنوان پستها ویژگی می بخشد). کد: .entry{ line-height: 18px; } (کد line-height فاصله ی بین خطوط یک مطلب را معین می کند که در اینجا ما برای آن مقدار متوسط و مناسب ۱۸pxرا انتخاب کرده ایم. می توانید مقدار آنرا به اعداد مختلف تغییر دهید تا وظیفه ی این خط کد را بهتر متوجه شوید. ولی در پایان مقدار را به همان ۱۸ پیکسل بازگردانید.) • مرحله چهارم: کد پاینن را در زیر سلکتورa:hover{} تایپ کنید: کد: p{ padding: 10px 0 0 0; } (سلکتور pبا پاراگراف های متن سروکار دارد و با توجه به مقدار padding داده شده، فاصله ی هر پاراگراف از دیگری ۱۰px پیکسل خواهد بود). • مرحله ی پنچم: کد زیر را در پایین سلکتور entry{} تایپ کنید: کد: p.postmetadata{ border-top: 1px solid #ccc; margin: 10px 0 0 0; } اگر بیاد داشته باشید، تگ باکس مخفی postmetadata را درون تگ های پاراگراف (p)قرار داده اید (اگر بیاد ندارید یک نگاهی به فایل index.php بیاندازید). پس برای استایل دادن به آن می توانید به صورت p.postmetadata آدرس دهی کنید. برای تگ باکس مخفی postmetadata ، شما یک حاشیه خاکستری با ضخامت یک پیکسل از سمت بالا و یک فاصله ی ۱۰ پیکسلی از طرف بالا را به postmetadata داده اید. نکته: اگه بیاد داشته باشید بخش postmetadata برای این است که اطلاعات هر پست مانند دسته ی پست، تعداد نظرات پست و… را درون آن جای دهیم. معنی عبارت border-top حاشیه از بالا (فقط از بالا) است. عبارت border-left معنی حاشیه از سمت چپ (فقط از سمت چپ) و به همین ترتیب برای border-bottomو border-right نیز معنی اش واضح است. برای مثال معنی عبارت border: 1px solid #ccc این است که: از هر چهار طرف حاشیه خاکستری با ضخامت یک پیکسل داده شود. • مرحله ی ششم: کدهای زیر را در پایین سلکتور p.postmetadata{} تایپ کنید: کد: .navigation{ padding: 10px 0 0 0; font-size: 14px; font-weight: bold; line-height: 18px; } در این کد شما برای بخش navigation یا همان قسمت صفحه ی بعدی و صفحه ی قبلی قالب بندی می کنید. در حقیقت شما: • ۱۰ پیکسل حاشیه از بالا اضافه کردید. • اندازه ی فونت را به ۱۴px تغییر دادید. • پهنای فونت را به ضخیم عوض کردید • ارتفاع خط را به ۱۸ پیکسل افزایش دادید.
صفحه آرایی با سایدباراز همین جهت ما در این جلسه تنها می توانیم بخش های اصلی را به شما معرفی کنیم و شما برای مطالعه ی جزئیات باید خود تحقق و تفحص کنید… برای شروع درس و اینکه چگونه سایدبار را صفحه آرایی کنیم به ادامه مطلب بروید… مثل همیشه شما بایستی index.php ، فایل style.css، مرورگر فایرفاکس، فولدر پوسته ی مورد نظر و در آخر تنظیمات برنامه ی Xampp را باز کنید. • مرحله ی اول : کدهای زیر را در پایین .sidebar{} تایپ کنید کد: .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; } حال شما با این کد ها تگ های ul ای که درون سایدبار هستند را صفحه آرایی کرده اید و به آنها ویژگی بخشیده اید. تمامی تگ های ul و همچنین ul های تو در تو، ویژگی های مورد نظر را به ارث خواهند برد. برای مثال : همانگونه که مشاهده می کنید، ul های دوم که با رنگ آبی مشخص شده اند با وجود اینکه در زیر مجموعه ی ul اصلی قرار دارند، باز هم ویژگی های ul اول را به ارث می برند. برای مثال اگر شما حاشیه ای را برای ul اول بدهید، همین حاشیه برای ul دوم نیز داده خواهد شد. تغییرات را ثبت کرده و مرورگرتان را refresh کنید تا تغییرات را مشاهده کنید. توجه کنید که چطور ۱۰ پیکسل padding به بالا و پایین سایدبار شما اضافه شده است. (عکس زیر) • مرحله ی دوم : کدهای زیر را پایین کدهای .sidebar ul{} تایپ کنید. کد: .sidebar ul li{ padding: 10px 0 10px 0; } با این کد مشاهده خواهید کرد که بین هر ابزارک یا ویجیت درون سایدبار فاصله ای ۱۰ پیکسلی از بالا و پایین ایجاد می گردد. (عکس زیر را با عکس بالایی مقایسه کنید) ◊ چرا این ۱۰ پیکسل فاصله را به تگ ul در مکان اول اضافه نکردیم؟ دلیل اینکار این بود که ما می خواهیم که بین اجزا یا ابزارک های داخل سایدبار فاصله ایجاد کنیم، برای مثال می خواهیم بین فرم جستجو و تقویم فاصله ای وجود داشته باشد یا بین تقویم و برگه ها فاصله ی مشخصی وجود داشته باشد. که در این صورت بایستی به تگ li درون ul سایدبار ویژگی بخشید. حال شما با فاصله ای (padding) که به سایدبار داده اید بین اجزای داخل سایدبار فاصله ای ۱۰ پیکسلی ایجاد کرده اید. • مرحله ی سوم : خط های زیر را در پایین کد های .sidebar ul li{} تایپ کنید: کد: .sidebar ul li h2{ font-family: Georgia, Sans-serif; font-size: 14px; } بیاد بیاورید که چگونه sub-heading های زیر مجموعه ی post{} را صفحه آرایی کردیم. در حقیقت شما با سلکتور ul li h2 عنوان اصلی هر ابزارک را صفحه بندی می کنید. حالا شما می توانید ویژگی های داده شده به عنوان هر ابزارک را مشاهده کنید. برای اینکه مدیریت بخش برگه ها حرفه ای تر باشد من خود علاوه بر برگه ی درباره یکسری برگه ی دیگر بصورت های مختلف (بصورت تو در تو و معمولی) از طریق مدیریت بخش وردپرس ایجاد کرده ام. اگر دقت کرده باشید فاصله ی هر کدام از برگه ها با دیگری حدود ۱۰ پیکسل است که کمی نازیبا بوده و بخش سایدبار ما را زشت می کند. ◊ دلیل این فاصله بین هر کدام از برگه ها چیست؟ چون شما به .sidebar ul li{} مقداری padding داده اید. بنابراین li های سطوح زیر دست نیز بر اساس قانون وراثت از این فاصله (padding) ویژگی به ارث می برند. برای حل این مشکل مرحله ی چهارم را بخوانید. • مرحله ی چهارم : کد زیر را زیر کدهای بخش .sidebar ul li h2{} تایپ کنید: کد: .sidebar ul ul li{ padding: 0; } با سلکتور .sidebar ul ul li{} و مقدار فاصله ی (padding) صفر، li های زیر دست ویژگی فاصله ی ۱۰ پیسکلی را از دست داده و به همان حالت اول باز می گردند. نتیجه این هست: کد line-height: 24px را نیز به .sidebar ul ul li{} اضافه کنید: اگر با انجام اینکار شما در اینترنت اکسپلورر، فضای اضافی را در زیر فرم جستجو پیدا کرده اید، عبارت form را به سلکتور های زیر در style.css اضافه کنید تا این مشکل برطرف شود: کد: body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{ margin: 0; padding: 0; } باید کد شما شبیه به این شده باشد: کد: body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{ margin: 0; padding: 0; } • مرحله ی پنجم (مرحله ی اختیاری) : این مرحله تنها برای افزایش زیبایی سایدبار و بویژه بخش تقویم می باشد. با انجام این مرحله تقویم شما کشیده شده و تمام بخش سایدبار را پوشش می دهد و از این نظر سایدبار شما را زیباتر می کند. الان شکل تقویم شما به صورت زیر است، همانطور که می بینید فضای خالی زیادی در سمت راست تقویم وجود دارد که از آن استفاده نشده است. برای صفحه آرایی تقویم باید ابتدا تگ مربوط به آن، مکان قرار گیری آن و نام id آن را پیدا کرد. برای انجام اینکار در مرورگر فایرفاکس به تب View رفته و سپس Page Source را انتخاب می کنیم. کدهای مروبط به سایدبار در بخش پایین کدهای سورس هستند، بنابراین اسکرول را به پایین کشیده تا به کدهای زیر برسید: حالا شما می دانید که تقویم در تگ Table با مشخصه ی id که مقدار آن wp-calendar است، قرار دارد. ◊ اما سوال این است که چطور wp-calendar را داخل فایل style.css هدف گیری کنیم؟ جواب table#wp-calendar{} هست. اما چرا؟ قبلاً به شما نحوه ی هدف گیری باکس مخفی (div) که با مشخصه ی id نام گذاری شده بود را آموزش داده بودیم (باید یک علامت # را در ابتدای نام آن قرار می دادیم). در این مورد شما فقط بجای div یک table دارید با مشخصه ی id پس بصورت table#wp-calendar آنرا هدفگیری می کنیم. چون #wp-calendar{} منحصر به فرد است بنابراین این سلکتور برای سایر تگها استفاده نخواهد شد. اما اگر شما می خواهید که این مقدار را باز هم منحصر به فرد تر کنید می توانید از سلکتور .sidebar ul li table#wp-calendar{} استفاده کنید. اما سوال اصلی اینجاست که چگونه این کشش را ایجاد کنیم تا تمامی فضای سایدبار پر شود. برای اینکار از کد width: 100% کمک می گیریم. به همین سادگی…. پس کدهای زیر را در پایین کدهای .sidebar ul ul li{} تایپ کنید: کد: table#wp-calendar{ width: 100%; } تغییرات را ثبت و مشاهده کنید… » width: 100%;- این کد در مورد پهنای بخش های مختلف مورد استفاده قرار گرفته می شود و در اینجا شما مقدار آن را ۱۰۰% گذاشته اید که در این صورت تمامی فضای سایدبار توسط این مقدار پر خواهد شد. البته بجای ۱۰۰% شما می توانید به آن پیکسل نیز بدهید مثلاً ۲۰۰ پیکسل.
فوتر و تقسیم بندی فایل index درس امروز ما کوتاه خواهد بود و در آن به نحوه ی ایجاد فوتر و مهم تر از آن تقسیم بندی فایل index.php به چندین فایل کوچکتر(برای مدیریت بهتر) خواهیم پرداخت. البته این مجزا کردن باعث نمی شود که فایل index.php اهمیت خود را از دست بدهد. برای شروع درس به ادامه مطلب مراجعه کنید…. برای شروع کار Xampp, Firefox, index.php, style.css را باز کنید. • مرحله اول: ۱۰ پیکسل فاصله (padding) از بالا به باکس مخفی footer بدهید. بعد از این همه درس باید اینکار را خودتان بتوانید انجام دهید. بنابراین کد را به شما نمی دهم، خود شما باید اینکار ساده را انجام دهید. • مرحله دوم: به تمام تگهای P داخل باکس مخفی footer یک ارتفاع خط (line-height) هجده پیکسلی بدهید. به شما یک کمک می کنم، سلکتور مورد نظر برای تگهای پاراگراف درون div فوتر #footer p{} می باشد. (شما امروز خودتان باید این ارتفاع خط را به این سلکتور بدهید.) • مرحله سوم: » یک فایل جدید بنام header.php بسازید. مطمئن شوید که نوع یا پسوند فایل php باشد نه یک فایل Document معمولی. » درون فایل index.php ، از تگ پایانی باکس مخفی header شروع کنید به انتخاب کردن و تا هر آنچه که در بالای آن قرار دارد را select کنید. بعد از انتخاب کردن تمامی خطوط، آنها را cut کرده و درون فایل header.php بچسبانید یا همان paste کنید. حال می توانید فایلheader.php من را برای فهم بیشتر دانلود کنید. • مرحله چهارم: شما باید به فایل Index.php بفهمانید که از این به بعد باید کدهای قبلی (کدهای مربوط به هدر) را از داخل فایل header.php بخواند. برای اینکار خط زیر را در ابتدای فایل index.php در عوض کدهای قبلی بنویسید: <?php get_header(); ?>کد بالا یک تابع داخل سیستم وردپرس است که به طور ویژه کدهای داخل فایل header.php را درون فایل index.php می خواند. در حقیقت کد بالا کد طولانی <?php include (TEMPLATEPATH . ‘/header.php’); ?> را برای شما خلاصه می کند. تغییرات را save کرده و مرورگر خود را refresh کنید. شما نباید هیچ تغییری را مشاهده کنید. اگر پوسته ی شما شکسته به نظر برسد یا ایرادی داشته باشد در هنگام انتقال کدها حتماً شما اشتباهی انجام داده اید. • مرحله ی پنجم: » مرحله ی پنجم نیز تقریباً مانند مراحل قبل است، منتها اینبار برای فایل sidebar.php انجام خواهیم داد. » از شروع باکس مخفی sidebar تا پایان آن باکس، کدها را انتخاب، cut و درون فایل sidebar.php بچسبانید. » سپس، در داخل فایل index.php بجای کدهای برداشته شده کد <?php get_sidebar(); ?> را تایپ کنید. » تغییرات را save کرده و مرورگرتان را refresh کنید. دوباره شما نباید تغییری را مشاهده کنید. » الان فایل sidebar.php من را می توانید برای فهم بیشتر دانلود کنید. • مرحله ی ششم: » همین مراحل بالا را برای فایل footer.php نیز انجام دهید. » در داخل فایل index.php بجای کدهای برداشته شده کد <?php get_footer(); ?> را تایپ کنید. » فایل footer.php من را می توانید برای فهم بیشتر دانلود کنید. ◊ بررسی کردن مراحل: » شما ۳ فایل جدید با نام های header.php و sidebar.php و footer.php بوجود آوردید. » شما با ۳ تابع جدید آشنا شدید. تابع های get_header() و get_sidebar() و get_footer().
در درس قبل آموختید که چگونه فایل index.php را برای مدیریت بهتر به فایلهای جداگانه ای تقسیم کنید، در این درس نیز قصد داریم تا همین عمل را برای بخش های دیگری انجام دهیم. که در اصطلاح به این فایلها Sub Template می گویند. اگر بیاد داشته باشید در جلسه ی قبل فایلهای index.php را به سه فایل header.php و sidebar.php و footer.php مجزا کردیم تا مدیریت آنها ساده تر باشد. در این جلسه این عمل را بصورت پیشرفته تری انجام خواهیم داد. برای ادامه درس به ادامه مطلب مراجعه کنید… هماگونه که گفته شده در این درس نیز قصد تقسیم کردن فایل index.php را داریم ولی با پیش زمینه ی درس قبل اینکار بسیار ساده تر خواهد بود. • مرحله ی اول: در این مرحله می خواهیم که صفحه ای برای بخش آرشیو بسازیم. پس برای اینکار مراحل زیر را انجام دهید. » یک فایل بنام archive.php بسازید » تمامی کدهای موجود در فایل index.php را کپی کرده و داخل فایل archive.php بچسبانید. » در داخل فایل archive.php تابع the_content را به the_excerpt تغییر دهید. » حال دوباره فایل archive.php را save کنید. همانطور که از نام فایل archive.php مشخص است این فایل برای نحوه ی نشان دادن صفحه ی آرشیو وبلاگ بکار می رود. و البته ما در اینجا این صفحه را دقیقاً مانند صفحه ی اصلی سایت طراحی کردیم بغیر از یک تغییر کوچک که در آن بوجود آوردیم. حال برای فهم بیشتر بروی یکی از آرشیو های قدیمی وبلاگ خود کلیک کنید تا تغییرات را متوجه شوید. بله درست است در صفحه ی آرشیو شما تنها خلاصه از هر مطلب را مشاهده می کنید نه کل مطلب را. عبارت the_excerpt بجای کد the_content باعث این عمل می شود. ◊ اما چرا اینکار را انجام دادیم؟ ما این عمل را برای محافظت در برابر جریمه ی گوگل انجام دادیم. چون اگر مطلبی هم در آرشیو و هم در صفحه ی اصلی سایت باشد، گوگل این مطالب را تکراری تلقی می کند و ممکن است که وبلاگ شما را جریمه کند و از رتبه ی وبلاگ شما کاسته شود. نکته: اگر شما مایلید که صفحه ی دسته های (Category) وبلاگ تان نیز با صفحه ی اصلی سایت شما متفاوت باشد، یک فایل بنام category.php ساخته و آنرا آنطور که مایلید تنظیم کنید. • مرحله ی دوم: » یک فایل بنام search.php بسازید. » هر آنچه که در فایل archive.php وجود دارد را کپی کرده و درون فایل search.php بچسبانید. » تغییرات را save کنید. با انجام این عمل تمامی نتایج جستجوی وبلاگ نیز بصورت گلچین نمایش داده خواهید بود. ◊ حال شاید این سوال برای شما پیش آید که اگر فایل search.php یا archive.php وجود نداشت، صفحه ی جستجوی وبلاگ یا بخش آرشیو وبلاگ چگونه نمایش داده می شد؟ باید در جواب گفت که اگر فایلهای search.php یا archive.php وجود نداشته باشند، آنگاه وردپرس بصورت هوشمندانه نحوه ی نمایش تمامی این صفحات را از فایل index.php می گیرد. • مرحله ی سوم: » دو فایل با نام های page.php و single.php بسازید. » تمامی کدهای موجود در فایل index.php را درون فایلهای single.php و page.php کپی کنید. (الان باید فایلهای Page و single مانند هم باشند.) » تغییرات را در فایل page و single ثبت کرده و فایل index.php و فایل single.php را ببیندید. • مرحله ی چهارم: فایل page.php در مورد نحوه ی نمایش برگه های وبلاگ شما وارد عمل می شود. حال برای بهتر شدن آن مراحل زیر را پی بگیرید. ۱- در فایل page.php در زیر کد <?php the_content(); ?> کدهای زیر را تایپ کنید: <?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?><?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?> 2- کدهای postmetadata از page.php پاک کنید. چون اطلاعات postmetadata در برگه های وردپرس بی معنی هستند. ۳- کدهای posts_nav_link() یا navigation را نیز در فایل page.php پاک کنید. ◊ چه اتفاقی افتاده است؟ کد خط اول که تایپ کردیم برای نمایش تعداد صفحات یک برگه می باشد. که ظاهر آن برای مجزا کردن در حالت ویرایش وردپرس به مانند عکس زیر می باشد: البته این امکان هنگامی استفاده می شود که شما یک برگه خیلی طولانی داشته باشید و بخواهید که مطلب مورد نظر خود را در چندین صفحه نشان دهید. دومین خط تایپ شده به مدیر وبلاگ یک لینک بنام Edit می دهد تا در صورت تمایل بتوانید با کلیک بروی آن به بخش مدیریت وردپرس رفته و مستقیماً متن مورد نظر خود را ویرایش کند. در حقیقت این دکمه برای سهولت دسترسی به ویرایش برگه ها می باشد. تغییرات را ثبت کرده و فایل page.php را ببیندید. • مرحله ی پنجم: اما تنها یک فایل دیگر مانده و آن هم single.php است. فایل single.php مربوط به نحوه ی نمایش صفحه ی اصلی مطالب است یعنی زمانی که شما بروی لینک ادامه مطلب کلیک می کنید و صفحه ی اصلی مطلب گشوده می شود و در آن صفحه قادر هستید که کامنت نیز بگذارید. (شما الان که در حال خواندن این مطلب هستید دقیقاً درون صفحه ی single.php قرار دارید.) ۱- درون فایل single.php در پایین کد <?php the_content() ?> کد زیر را تایپ کنید: <?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?> بله ، این کد همان خط از کدهایی برای لینک های صفحات می باشد. این کد نیز دقیقاً برای صفحه بندی پست ها بکار می رود. ۲- در بخش postmetadata، تابع <?php comments_popup_link(); ?> و همچنین تگ <br /> قبل از آن را پاک کنید. ولی کل بخش postmetadata را پاک نکنید. و دلیل پاک شدن تگ br نیز این است که یک فاصله ی اضافی را بوجود می آورد که اضافی است. دلیل اینکه شما تابع تعداد نظرات را پاک می کنید این است که این تابع در بخش single دیگر کار نمی کند بنابراین استفاده ای نخواهد شد، پس بهتر است که در فایل single.php پاک شود. ۳- بجای کد <?php posts_nav_link(); ?> عبارت زیر جایگزین کنید: <?php previous_post_link(’« %link’) ?> <?php next_post_link(’ %link »’) ?> در صفحه ی اصلی، صفحه ی آرشیو، صفحه ی دسته ها و صفحه ی جستجو ، شما از تابع posts_nav_link() استفاده می کنید تا لینک های Next page و Previous page را صدا بزنید. اما برای صفحه ی single چون لینک های Next page و Previous page وجود ندارند. شما از تابع های previous_post_link()وnext_post_link() استفاده کردید تا لینک پست های بعدی و قبلی را صدا بزنید. تغییرات را در فایل single.php ثبت کنید و آنها را در مروگر مشاهده کنید.
