دوره مجازی قالب وردپرس (جلسه 25): پیاده سازی مطالب وب سایت در قالب



visibility  
mode_comment   ۶۷

به نام خدا و سلام. با جلسه 25 ام از دوره مجازی طراحی قالب وردپرس در خدمت شما هستیم. در جلسه قبل ما مباحث مربوط به حلقه ها رو گفتیم و در این جلسه به صورت عملی این موارد رو پیاده سازی می کنیم. در طرح قالبی که برای دوره در نظر گرفته بودیم بخش مطالب اصلی وب سایت دارای سه تب بود که در هر کدام مطالب متفاوتی نمایش داده میشه. به همین خاطر ما باید از حلقه wp_query برای این کار استفاده کنیم. در این مطلب آموزش پیاده سازی آرگومان های مورد نیاز و برای دریافت مطالب هر بخش رو توضیح میدیم و مطالب رو نمایش میدیم و هم چنین داده های هر مطلب رو در حلقه نمایش میدیم.

در این جلسه خواهیم دید :

  • پیاده سازی نمایش تصاویر با استفاده از تابع get_post_thumbnail
  • اضافه کردن اندازه های دلخواه با تابع add_image_size و تنظیمات آن
  • پیاده سازی بخش مطالب اصلی قالب با حلقه WP_Query
  • پیاده سازی نمایش داده ها هر مطلب با توابع مربوطه
info توجه

این مطلب یک جلسه از آموزش طراحی قالب وردپرس حرفه ای می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

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

comment دیدگاه کاربران
مصطفی فدائی replyپاسخ

عالی بود ممنون .

majid zare replyپاسخ

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

کیوان علی محمدی

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

< ?php add_filter('upload_dir', 'cgg_upload_dir'); function cgg_upload_dir($dir) { // xxx Lots of $_REQUEST usage in here, not a great idea. // Are we where we want to be? if (!isset($_REQUEST['action']) || 'upload-attachment' !== $_REQUEST['action']) { return $dir; } // make sure we have a post ID if (!isset($_REQUEST['post_id'])) { return $dir; } // modify the path and url. $type = get_post_type($_REQUEST['post_id']); $uploads = apply_filters("{$type}_upload_directory", $type); $dir['path'] = path_join($dir['basedir'], $uploads); $dir['url'] = path_join($dir['baseurl'], $uploads); return $dir; }

darin replyپاسخ

سلام
استاد واقعا ممنونم از آموزش خوبتون
استاد چندتا سوال داشتم:
وقتی پیوندهای یکتا را روی نمایش نوشته تنظیم میکنم و روی یک پست کلیک میکنم آدرس را نمی تواند پیدا کند! چون در آدرس بار مرورگر بصورت فارسی نوشته می شود، ارور میدهد که کاراکتر های فارسی را نمیشناسد و نوشته را نمیتواند پیداکند. ارور 404 نمیدهد که مطلب پیدا نشد فقط کاراکتر های فارسی را نمی شناسد.
استاد یک سوال دیگر : add_image_size چرا علاوه بر سایزی که میدهیم چند تا سایز پیش فرض دیگر برش میدهد؟؟ نمیشه عکس اضافه تولید نکند؟؟ فقط سایزی که دادیم را تولید کند؟
استاد تابع get_the_title بدون پارامتر ID هم عنوان مطلب را بر میگرداند، ننوشتن آن مشکلی ایجاد نمیکند؟؟؟

کیوان علی محمدی

سلام فایل single.php رو از قبل طراحی کردید؟ محتوایی رو نشون میده؟ بهتره نحوه نمایش مطالب رو از قسمت پیونده های بکتا عوض کنید و ذخیره کنید و دوباره تنظیمش کنید اگه لازم شد ساختار دلخواه بهش بدین. تابع add_image_size تصاویر دیگه رو به خاطر کدهای پیش فرض خودش میسازه. بله فقط با قرار دادن یک فیلتر میشه کاری کرد که وردپرس اون تصاویر رو تولید نکنه این مطلب رو بخونید. نه مشکلی ایجاد نمیکنه چون به صورت پیش فرض عنوان مطلب فعلی رو میگیره.

darin replyپاسخ

استاد ازش یک اسکرین شات ازش گرفتم
uupload.ir/files/ymk2_1.png

کیوان علی محمدی

این خطا نشون میده که شما دامنه مجازی که در جلسات اول به درستی تنظیم نشده و بعدشم این خطا مربوط به apache و کدهای htaccess هستش. شما برین جلسات اول و دامنه مجازی رو به صورت صحیح تنظیم کنید و دوباره تست کنید. اینم بگم وقتی دامنه مجازی رو درست تنظیم کرده باشید دیگه نیازی نیست localhost رو توی آدرس بنویسید.

darin

استاد جلسات اول کامنت گذاشتم و مطرح کردم
دقیق مثل خودتون پیش رفتم وقتی من اسم سایت رو وارد میکنم که بیاد بالا مثل اینکه نوشته باشم localhost و صفحه اول localhost را میاره!
راهنمایی کردید ولی درست نشد.
استاد خطایی که رخ داده است در تصویری که فرستادم کاراکتر های فارسی را نمیشناسه
دقیق مثل خودتون پیش رفتم ولی اگر پیوندهای یکتا روی اسم نوشته ست شده باشد خطا رخ میدهد وقتی روی لینکی کلیک میکنم

کیوان علی محمدی

این مشکل قطعا از پیکربندی apache هستش. فایل htaccess شما نمیتونه ادرس های درخواستی رو بررسی کنه به همین خاطر ادرس رو خطا میده. این کدها رو به فایل htaccess پروژه اضافه کنید و دوباره تست کنید.

AddDefaultCharset UTF-8
AddCharset UTF-8 .php

mohamad mohamadi replyپاسخ

سلام آقای محمدی واقعا دمت گرم خیلی این دوره بهم حال داد

reza_yki replyپاسخ

سلام استاد
من توسط با اموزش ها یک کاستوم پست درست کردم به نام blog حال من می خوام مطالبی رو که با این کاستوم پست ارسال میشه به یک سبک دیگه از مطالب نمایش داده بشه مثل دسته ها که میشه با قرار دادن نام دسته مثل category-slug.php به استایل دیگه داد و نمایش داد.
راه حلی سراغ دارین؟

کیوان علی محمدی

سلام باید در قالبتون فایلی با نام single-blog.php ایجاد کنید و استایل های مورد نظر رو بهش اعمال کنید

محمد صیادی replyپاسخ

سلام
خسته نباشید
من موقع آپلود یک عکس به عنوان تصویر شاخص با خطای زیر مواجع میشم:
**خطایی هنگام بارگذاری پرونده پیش آمده. دوباره تلاش کنید.**
لطفا راهنمایی بفرمایید مشکل از کجاها میتونه باشه؟

کیوان علی محمدی

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

محمد

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

کیوان علی محمدی

سلام یک احتمال دیگه هم وجود داره باید موجود بودن خطا در کد ها رو هم چک کنید. بهتره از بخش inspect elements گوگل کروم تب network برای درخواست های ای جکس رو بررسی کنید چون آپلود های وردپرس به صورت ای جکس ارسال میشه احتمال زیاد می تونید خطا رو اونجا هم پیدا کنید.

Mohammad Reza replyپاسخ

سلام استاد چرا با این کد نام نویسنده رو نمایش نمیده؟؟؟؟؟
php echo get_the_author();?>

کیوان علی محمدی

از تابع get_the_author_posts_link()استفاده کنید.

Mohammad Reza

بااین تابع درست نشد درفایل single یا funcion چیز خاصی نمیخواد بنویسم ؟؟

کیوان علی محمدی

این تابع رو کجا استفاده کردید؟

Mohammad Reza

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

کیوان علی محمدی

خیلی عجیبه. بهتره یکبار دیگه کدهاتون رو چک کنید یا اینکه ارسال کنید بنده بررسی کنم.

Ehsan a replyپاسخ

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

http://s6.picofile.com/file/8257233268/7learn.rar.html

کیوان علی محمدی

سلام می تونید به عنوان custom post type در نظر بگیرید و براش دسته بندی خودش رو ایجاد کنید که اون قسمت تب ها رو باهاش می تونید بسازید.

Ehsan a replyپاسخ

سلام استاد علی محمدی خسته نباشید. استاد من دیروز به شما یه میل زدم در مورد modal دو روزه درگیرشم نتونستم مشکلمو حل کنم میشه منو راهنمایی کنید؟ توی میلی که زدم مشکل رو گفتم ممنون میشم اگه راهنمایی کنید. jane_janan2011@yahoo.com

کیوان علی محمدی

سلام ایمیلتون نرسیده متاسفانه.

حسین کریمی replyپاسخ

سلام جناب علی محمدی. من هنگامی که کد add_theme_support(‘post-thumbnails’); را درون function.php قرار می دهم، به جای درست کردن قسمت تصویر شاخص این پیغام وجود دارد Set featured img
میشه راهنمایی بفرمائید.ممنون

کیوان علی محمدی

سلام این پیغام درسته و باید به صورت دکمه قرار داده شده باشه.

حسین کریمی

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

کیوان علی محمدی

احتمال زیاد میدم کدهای جاوا اسکریپت برای اون قسمت دچار کانفلیکت شده. خودتون کدهای جاوا اسکریپتی رو در قسمت ادمین اضافه نکردین؟ تب console از developer tools رو چک کنید ببینید خطایی داره یا نه.

حسین کریمی replyپاسخ

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

کیوان علی محمدی

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

amir baragy replyپاسخ

سلام استاد
تفاوت این دو اکشن در چی هست؟
after setup theme و init

2-چرا به جای the post thumbnail از get the post thumbnail استفاده کردم؟

استاد یه سوال دیگه اینکه، من این قسمت ( ) رو درست متوجه نشدم که چه عملی رو انجام میده .
تشکر

کیوان علی محمدی

اکشن init قبل از after_setup_theme اجرا میشه و برای کارهای مهم تر استفاده میشه. مثل اضافه کردن rewrite یا به روز رسانی دیتابیس و ست کردن session و after_setup_theme بیشتر برای ست کردن قالبی که داره اجرا میشه استفاده میشه.

فرهاد replyپاسخ

سلام استاد علی محمدی. توی این جلسه در مورد تصاویر شاخص کمی صحبت کرده بودید. سوال من اینه که اگر بخوایم خودمون تصویر شاخص رو برش بدیم و اون قسمتی ازش که نیاز داریم crop کنیم و نمایش بدیم چیکار باید بکنیم؟ آیا افزونه ای لازم هست که این کار رو انجام بده و اگر جواب مثبت هست چه افزونه ای

کیوان علی محمدی

سلام باید از تابع add_image_size استفاده کنید.

فرهاد

سلام استاد. تابع add_image_size رو که میدونم این رو خودتون معرفی کردید. منظور من این هست که کاربر به این صورتی که در این لینک اومده بتونه تصویر رو برش بده
https://fengyuanchen.github.io/cropperjs/
بی زحمت یه نگاهی به این لینک بیندازید

کیوان علی محمدی

میتونی از تابع imagecrop خود php استفاده کنی . این تابع یکسری مختصات میخواد که این مختصات رو میتونی از اون افزونه جی کوئری براش بفرستی.

رضا یزدانی replyپاسخ

سلام استاد
میخام بدونم آیا میشه برای کاستوم پست تایپ دانلود یه category اضافه کرد یا میشه دسته ها به اون اضافه کرد؟؟؟

کیوان علی محمدی

سلام بخش custom taxonomy رو حتما ببینید

رضا یزدانی

ممننون شرمنده من هنوز کامل مشاهده نکردم

rezad91 replyپاسخ

سلام ببخشید من میخواستم بدونم که چرا نرم افزار phpstorm برای من کدها را به صورت آماده نمایش نمیده ، من باید کل کد را کامل تایپ کنم ولی توی ویدئو کدها آماده هستند و با تایپ چند کلمه کد مورد نظر نمایش داده میشه .ممنون میشم راهنمایی کنید

کیوان علی محمدی

سلام وقتی پروژه روی وردپرس باشه خود نرم افزار پیشنهاد میده که ویژگی وردپرس فعال بشه و کافیه شما اوکی کنید. چک کنید پلاگین وردپرس برای شما نصب و فعال باشه.

rezad91

تشکر مشکل حل شد طریقه وارد کردن پروژه من اشتباه بود

مهدی طیبی replyپاسخ

دو تا مشکل در این بخش برام پیش اومده که به ترتیب براتون میگم :
1 – مشکل اول در ایجاد تصاویر بند انگشتی هستش :
من در فایل فانکشن خودم 2 تا سایز بیشتر نمیدم که با فایل اورجینال میشه 3 فایل در اصل اما درون پوشه آپلود من 5 تا فایل کراپ و آپلود میکنه و بعضا اون سایزی که میخوام نیستش .

این مشکل بخصوص در بخش Custom_post_type ها دارم که یه بخش نمونه کار ایجاد کردم که اون سایزی که بهش میدم برام کراپ ( فیت کردن تصویر ) نمیکنه .

2 – مشکل دوم در فراخوانی عنوان دسته بندی هر مقاله در صفحه اصلی هستش که آخرین مقالات من در صفحه اصلی نمایش داده میشود که هر کدوم دسته بندی های خاص خودش رو داره . با استفاده از دستور get_the_category فراخوانی نمیشه و خروجی به عنوان array می باشد .

باید حتما یک متغیر ایجاد کنم و این مقدار بالا داخلش فراخوانی کنم و با آرایه و echo دسته بندی فراخوانی کنم . دلیلش میخواستم توضیح بدید و ایا این شیوه صحیح است یا خیر ؟

کیوان علی محمدی

خود وردپرس اون تا سایز دیگه رو هم ایجاد میکنه. یعنی با سایز های شما میشه 5 تا. اون تابع get_the_category هم یک آرایه برمیگردونه و کد شما مشکلی نداره.

mohamad mohamadi replyپاسخ

سلام ببخشید من چجوری میتونم یک کاری کنم که برای مثال هر صفحه ۶ تا مطالب بشه گزاشت برای دیدن مطلب ۷امی باید برن رو دومین قسمت مثل همینجا
نظرات یک تعدادی گزاشتن بعد که زیاد شد رفتن صفحه دوم
چجوری این کارو کنم ؟

mohamad mohamadi replyپاسخ

منظورم اینه که مثلا تو هر پیج ۱۰ تا پست باشه بعد با یک دکمه بره page 2 و ۱۰ تا مطلب بعدیو بیاره

کیوان علی محمدی

قبلا گفته بودیم که در کدهای سمت سرور باید مقدار per_page رو در کدهای WP_Query رو تغییر بدین. مثلا مقدارش رو همین 10 انتخاب کنید.

سحر بشری replyپاسخ

سلام اقای علیمحمدی وقتتون بخیر.
در زمان اپلود کردن تصویر شاخص خطا پیش میاد مثلا میخوام هرکسی اپلود کنم اصلا نمیشه. چیکار کنم این خطا رفع شه؟ کدهای مربوط به این قسمت هم چک کردم درست نوشتم.

کیوان علی محمدی

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

Mehdi Soli replyپاسخ

سلام جناب علی محمدی، روزتون خوش، هنگامی که بین “همه مطالب” و “آخرین مطلب” و “آخرین دانلود” برای اولین بار کلیک می کنیم (در واقع سوئیچ می کنیم) تا موس کاربر حرکت نکند، افکت دیده نمی شود و پست ها لود نمی شوند. خود من یه نیم ساعتی سرکار بودم تا دیدم در سورس صفحه هستند و به مطلب پی بردند. این ممکن است برای کاربر سایت ما هم اتفاق بیفتد یعنی تا اسکرول نکند، پست ها نمایش داده نشده و اگر مثلا صفحه طوری باشد که اسکرول نشود، عملا کاربر فکر می کند پستی در این بخش وجود ندارد. چطور می شود این مشکل رو در wow.js حل کرد که نیازی به اسکرول نباشد و بدون اسکرول انیمیشن ها لود شوند؟ آیا این امکان در این کتابخانه موجود هست؟ ممنون میشم که راهنمایی بفرمایید. بسیار ممنون از لطف و محبت شما

کیوان علی محمدی

سلام دوست عزیز. پیشنهاد میکنم در هنگام لود شدن هر تب تابع WOW().init() رو فراخوانی کنید.

mostafash replyپاسخ

استاد سلام
من دارم از تصویر توی طراحی خودم استفاده می کنم.آدرس عکس رو با استفاده از src وقتی میدم ،عکس رو لود نمی کنه ولی وقتی بجاش از data-original استفاده می کنم عکس رو نشون میده.
مشکل چیه؟
خیلی گیر کردم.
ممنون میشم راهنمایی کنین.

کیوان علی محمدی

سلام. شما احتمالا از پلاگین lazy load برای نمایش تصاویر استفاده می کنید چون data-original مربوط به این پلاگین هستش.

mostafash

استاد چرا وقتی از src توی تگ img استفاده می کنم،عکس رو لود نمیکنه.پلاگین lazy load رو چه جوری باید استفاده کنم که تگ img تمامی عناصرش رو بشه بدرستی استفاده کرد.من باید برای تگ img حتما از src استفاده کنم.چه جوری باید ازش استفاده کنم وقتی پلاگین lazy load فعاله

کیوان علی محمدی

میتونی در کدهای جی کوئری بگی مثلا تگ های img که کلاس فلان رو دارن فقط از طریق lazy load اجرا بشن و بقیه به صورت عادی نمایش داده بشه.باید lazy load رو محدود کنی.

mostafash

استاد این کد رو ببینین

پلاگین lazy load داره میگه که بعد از تگ img بلافاصله از data-original استفاده کنید.من همین کار رو انجام دادم وتصویر هم نمایش داده میشه ولی وقتی لود میشه ،تمام تگ های html بعد از data-original هم نمایش داده میشه .چیکار کنم که اون تگ ها نمایش داده نشه و وفقط عکس لود بشه

کیوان علی محمدی

متوجه منظور شما نشدم که تمام تگ های html بعد از اون هم لود میشه.

mostafash

نگاه کنین تگ img یک سری خصوصیات به خودش نیاز داره مثل src یا width یا height یا alt و title.
پلاگین lazy load داره میگه که شما بجای src باید از data-original استفاده کنین تا تصویر نمایش داده بشه.
وقتی من از data-original استفاده می کنم تصویر شاخص نمایش داده میشه.و خصوصیا دیگه ای هم که برای تگ img تعیین کردیم هم داره به کاربر نشون میده.مثلا گفتیم width=100 , height=200 این خصوصیات هم داره نمایش داده میشه.در حالیکه این خصوصیات باید پنهان باشه و موقع اجرای تصویر شاخص نباید نمایش داده بشه
من فکر میکنم یه ترفندی داره که من بلد نیستم

کیوان علی محمدی

سلام . توی تنظیمات lazy load هم چین چیزی وجود نداره و فکر می کنم به خروجی تگ های html که شما نوشتین مربوط میشه. شما باید اون قسمت از کد رو inspect کنید و ببینید کجای تگ ها مشکلی داره. احتمالا درست بسته نمیشه تگ.

علی اصغر جهانی replyپاسخ

سلام استاد . خسته نباشید .
من از تابع add_image_size در قالب صحیفه استفاده میکنم . ولی هر تصویری رو یه جوری نمایش میده . اینم آدرس سایتم خودتون ببینید . www.learnschool.ir
ممنون

کیوان علی محمدی

سلام. چک کنید توابع به درستی فرخوانی شده باشند و آرگومان لازم رو بهش ارسال کرده باشین.

Masoud Azimi replyپاسخ

سلام و ادب
سوال؟
سایز تصاویری که با استفاده از تابع add_image_size ایجاد میکنیم حتی با دادن عرض و طول به این تابع، دقیقا همون سایز رو نمیده – من عرض 260 رو برای تابع add_image_size درنظر گرفتم ولی اونرو تبدیل به 225 پیکسل تبدیل کرد (برای شما ارتفاع 150پیکسل رو تبدیل به 149 کرد) که میتونه تو ظاهر سایت تأثیر داشته باشه – حتی با استیال دادن اینلاین با Important دادن هم سایز تصویر تغییر نکرد ؟ آیا راهی وجود دارد برای حل این مورد؟
با سپاس

کیوان علی محمدی

تابع add_image_size یک آرگومانی به نام crop داره که مقدار پیش فرضش false هست اگر اینو true کنید به سایز دقیق تبدیل میشه.

مرتضی مهاچر replyپاسخ

باسلام خدمت استاد عزیز
وقتی که ادرس loops.loop,all رو توی main-content وارد می کنم انگار (همه مطالب) من اپلود نمیشه(وقتی loop تنها رو وارد می کنم آپلود میشن) ، بنظر تمام کدهامم درست وارد کردم بنظر شما مشکل از کجاست؟

<?php get_template_part(‘loops/loop’,’all’);?>
مرتضی مهاچر

گرچه که یک روز درحال تفکر بودم ولی درنهایت فهمیدم که فایل LOOPS رو من توی یک پوشه قبل تر از SL-THEME درست کرده بودم و ادرس فراخوانی نمیشد و…

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.