campaign-off40

دوره مجازی قالب وردپرس (جلسه 9) : تبدیل بخش منوی بالای قالب به html و css



visibility  
mode_comment   ۷۷

با سلام.در خدمت شما هستیم با نهمین جلسه از دوره مجازی آموزش طراحی قالب حرفه ای وردپرس.در این جلسه بخش دوم دوره ما که تبدیل قالب طراحی شده به Html و Css هست رو شروع می کنیم.ابتدا یک هاست مجازی با آدرس 7learn.html ایجاد می کنیم تا کدهای Html رو اونجا قرار بدیم و بعد از اون ساختار فایل ایجاد می کنیم و بعدشم هم میریم سراغ کد نویسی منوی بالای قالب.با ما باشید 🙂

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

  • ایجاد هاست مجازی 7learn.html
  • پیاده سازی قالب آماده Html5Boilerplate
  • پیاده سازی بخش منوی بالای سایت
  • پیاده سازی بخش لینک های شبکه های اجتماعی منوی بالای سایت
info توجه

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

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

comment دیدگاه کاربران
sara salami replyپاسخ

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

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

سلام هنوز که به قسمت وردپرس نرسیدیم 🙂 شما وقتی لینک دسته بندی ها رو با تابع wp_list_category ایجاد کنید با کلیک رو هر کدوم فایل category.php لود میشه و مطالب اون دسته بندی که روش کلیک شده طبق حلقه داخل category.php نمایش داده میشه.

sara salami

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

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

شما حلقه ای که در فایل index.php احیانا نوشتید رو در فایل category.php هم پیاده کنید.

AliMV replyپاسخ

سلام خدمت آقای علی محمدی عزیز

اینشاا… که این فصل هم به زودی تموم شه تا وارد مبحث اصلی وردپرس بشید.
اونجا مطمئنا مباحث و سوالات زیادی هست که ممکنه ما دانشجویان این دوره بهش برخورد کنیم.

همچنین اگر براتون مقدور هست تعداد جلسات را به سه جلسه در هفته افزایش بدین تا بیشتر بتونیم بهره ببریم چرا که واقعا در فاصله ی بین جلسات لحظه شماری می کنم تا جلسه بعدی شروع شه 😀

تشکر از شما و دوره فوق العادتون 😎

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

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

زمان الله ابراهیمی replyپاسخ

باسلام خسته نباشید استاد
فقد استاد اگه لطف کنید فایل کرک
قرار بدید خیلی ممنون میشم PhpStorm من فایل را از فی سی دانلود دانلود کردم
ریجستر هم شد اما هنوز هم رنگ پس زمنیه به حالت خکستری است
لطفا” راهنمایی

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

سلام از قسمت Settings بخش Editor و بعد از اون Font and Color رو پیدا کنید و رنگ و فونت دلخواه رو برای ادیتور انتخاب کنید.

darin replyپاسخ

سلام و خسته نباشید خدمت استاد ارجمند
استاد من هاست مجازی را ایجاد کردم ولی هنگام استفاده از آن به آدرس نمی روم فقط مثل این عمل میکند که بجای localhost نوشته باشم 7learn.html و برای وارد شده به آدرس 7learn.html باید http://7learn.html/7learn.html/ را وارد کنم
تمامی مراحل را درست رفتم و داکیومنت روت را هم دقیق وارد کردم
من از وب سرور wamp استفاده میکنم. البته مراحل انجام کار یکسان است.

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

سلام و ممنون. رو wamp راست کلیک کن و از منوی ظاهر شده گزینه apache رو انتخاب کن بعدش دنبال خطی با کد # Include conf/extra/httpd-vhosts.conf بگرد و اینو از حالت کامنت در بیار.اینو حتما جک کن.

darin

ممنون

حمید رضا مصطفی زاده replyپاسخ

سلام استاد
من تو جلسه پیش سوالی پرسیده بودم که هنوز منتظر تاییده (3 روزی هست)!!! یه سوال ساده بوده

یه سوال اینکه مگر تو این پلت فرمی که از سایت html5boilerplate.com استفاده کردید خودتون فرمودید که داخل این پلت فرم که normalize.css هست که از reset های معروفی خودش استفاده میکنه
حالا سوالم اینکه چرا تو قسمت کد زدن body از margin 0 و pading 0 استفاده کردید؟ مگر خود reset ها ندارن؟

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

سلام کدهای normalize.css با reset.css که قبلا بود فرق داره و این مورد رو نداشت و ما باید خودمون می نوشیم.

darin replyپاسخ

باعرض سلام مجدد
استاد در طرح فتوشاپ، منوی بالا سمت راست هر کدام از ایتم ها یک گوشه خمیده دارند که در تبدیل، کد border-radus را یادتون رفت اعمال کنید.
باتشکر

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

سلام ممنون از دقت شما.حتما درستش می کنیم 🙂

sara salami replyپاسخ

استادسلام .نحوه استفاده ازفیدرودرتم پیاده می کنید بدون استفاده ازافزونه .ممنونم.

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

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

امین خلیلی replyپاسخ

سلام من به یه شکل دیگه کد نویسی کردم اگه امکان داره یه نگاهی بهش بندازید
http://s6.picofile.com/file/8213696718/temp.rar.html

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

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

امین خلیلی

فایل index.html و css را گذاشتم از همون قالبی که گفتید دانلود کنید

امین خلیلی

استاد فایل ها را چک کردید

Ehsan Azizi replyپاسخ

سلام استاد
یه مسئله ای رو در مورد دامین هایی که تنظیم کردید داشتم(7learn.html )
اگر بخواهیم برای یک سایت به آدرس domain.ir قالب طراحی کنیم می تونیم توی زمپ این آدرس فرضی رو (domain.ir) مثل دامنه ی (7learn.html ) قرار بدیم و در انتهای کار کل بسته ی وردپرس رو برای مشتری ارسال کنیم؟(تا لینک ها بهم نخورن و اینجور مسائل)

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

سلام بله می تونید همچین کاری بکنید فقط باید حتما آدرس دامین رو در فایل hosts بر روی 127.0.0.1 تنظیم کنید.بر روی هاست اصلی هم باید تنظیمات دیتابیسو امنیتی رو اعمال کنید.

میلاد کریمی replyپاسخ

سلام استاد من تو تاپ بار قسمت منو وقتی برای تگ i پدینگ میزارم بازم ایکون چسبیده به تگ a
float رو هم که تنظیم میکنم پس زمینه نوشتم کوچیک میشه ، در ضمن منو رو سمت چپ قرار دادم مال شما سمت راسته ممنون میشم راهنمایی کنید

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

منظورتون از پس زمینه نوشته چیه؟ شما فقط کافیه کدهای align رو تغییر بدین و مثلا float رو ست کنید و text-align رو تغییر بدین .اینطوری فکر کنم مشکلتون حل بشه.

میلاد کریمی

سلام استاد
وقتی اینو اضافه می کنم

باکسی که برای پشت منو مشخص کردیم کوچیک میشه

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

منظورتون باکس های پس زمینه تگ های a هستش. خوب باید کدهای تگ a رو تغییر بدین.

میلاد کریمی

??

m3y3am replyپاسخ

سلام
نام کلاس های Font-Awesome برای شبکه های اجتماعی به طور مثال class=”fa fa-facebook-square” بود ولی در css از fa اولی چشم پوشی کردیم چرا ؟ ( i.fa-facebook-square )

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

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

mohamma0d replyپاسخ

سلام
میخواستم بدونم چطور رنگ زمینه PHPStorm رو از سفید به رنگ تیره ببرم
واسه من ورژن 10 هست
با تشکر

وحید صالحی

به مسیر زیر برید
flie->setting->appearance &behavior
بعد از پنجره سمت راست قسمت UI Option گزینه theme مقدارش رو تغییر بدید و مثلا گزینه Darcula رو انتخاب کنید بعد از apply کردن از همون مسیر بالا به قسمت Editor برید و گزینه Colors & Fonts رو انتخاب کنید و از پنجره سمت راست یکی از گزینه های Scheme رو انتخاب کنید منظور رنگ مورد نظر هست
در ضمن اینگونه سوالات رو در انجمن مطرح کنید

امین عظیمی replyپاسخ

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

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

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

امین عظیمی replyپاسخ

برای ایجاد آیکن منوی تاپ بار از تگ i استفاده شد
تا جایی که من میدونم این تگ برای ایتالیک کردن متن استفاده میشه
کاربرد دیگه ای هم داره؟
میشد از تگ b هم برای اینجا استفاده کرد؟

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

سلام موردی که شما گفتین در html 4.01 بود و در html5 ضروری نیستش برای همین کتابخانه های نمایش فونت از این تگ بیشتر استفاده می کنن.

پرستو کفیلی replyپاسخ

salam
man in dore ro kharidam. cd ro ham kharidam , vali hanoz baram ersal nashode.
fekr konam yek ya do hafte pish cd ro kharidam. shomareye peigiri ro ham daram 🙁

لقمان آوند

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

mostafa saedi replyپاسخ

عرض سلام و احترام خدمت مدرس محترم
آقای محمدی من از پلت فرم html5boiler استفاده می کنم برای ایجاد منوی تاپ بار کدهای مربوطه رو وارد می کنم ولی چیزی نمایش داده نمیشه در css وقتی بکگراند رو در body تغییر می دم تغییر می کنه ولی برای ایجاد منوی top bar هر کاری می کنم نمایش داده نمیشه حتی از فایل های تمرین استفاده کردم بازم نمایش نداد کلافم کرده لطفا راهنمایی کنید.
با تشکر

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

سلام دوست عزیز. بهتره مرحله به مرحله پیش برید.اول ساختار html رو بررسی کنید و بعدش با استفاده از developer tools ببینید استایل هاتون روی تگها اعمال میشه یا نه.

eli yat replyپاسخ

با سلام و تشکر بابت آموزش های مفیدتون

من قالب وردپرسم ، وقتی پلاگین های مختلف و نصب می کنم ، style اون ها رو برام لود نمی کنه .
مجبور می شم داخل css های خودم به کلاس های پلاگین style بدم .

مشکل از کجا است و چه طوری می توان مشکل را حل کرد ؟
ممنون

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

سلام تابع wp_head در قالبتون اضافه شده؟

eli yat

نه من خودم header را می نویسم توابع مثل wp-header یا wp-footer را صدا نمی زنم .

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

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

محمد پارسا کوشش replyپاسخ

سلام یک سوال داشتم
سوال من اینکه من توی کد نویسی خواستم یک عکسی را پس زمینه ی هدرم کنم مانند سایت ای نتورک و آرمانیک . بعد گفتم برای این کار که عکس ، عرضش full بشه و … ودقیقا مثل سایت ای نتورک بشه باید چه کد هایی به قالب اضافه کنم ؟

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

سلام. شما می تونید مثال های زیادی با سرچ عبارت hero image with css بدست بیارید و کدهاش رو استفاده کنید

محمد پارسا کوشش replyپاسخ

با سلام یک سوال دیگه هم داشتم. سوالم اینکه که من یک مستطیلی ساختم و در CSS یک border radius دادم و خواستم یک نوشته در آن قرار دهم ولی هرچی پدینگ و مارجینگ می دهم متن جابه جا نمی شود . حالا من باید چه کدی اضافه کنم؟

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

سلام. سوالتون خیلی واضح نیست ولی بهتره متن رو بر اساس text-align و خاصیت های دیگه تنظیم کنید. می تونید متن رو داخل یک تگ p قرار بدین و بعدش به تگ p استایل بدین.

محمد پارسا کوشش replyپاسخ

با سلام اقای کیوان علی محمدی یک سوال داشتم
سوال من اینکه من توی کد نویسی با نرم افرار php storm وقتی مثلا می خواهم بنویسم (۲۶ هزار تومان) توی یک تگ مثلا h2 می نویسد (هزارتومان 26) . حالا من چگونه این مشکل را حل کنم؟

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

سلام دوست عزیز. این مشکل فونت های فارسی هستش. شما باید یک تابع درست کنید که اعداد انگلیسی رو با اعداد فارسی در متن مورد نظر تعویض کنه.

محمد پارسا کوشش

چگونه یک همچین تابع ای درست کنم؟

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


function convert_to_persian_numbers($text = null){
if(empty($text)){
return $text;
}
return str_replace(array ('0','1','2','3','4','5','6','7','8','9'),array ('٠','١','٢','٣','۴','۵','۶','٧','٨','٩'),$text);
}

محمد پارسا کوشش

این تابع را در چه فایل قرار دهم؟

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

در فایل functions.php قرار دهید و بعد هر جا خواستید فرخوانی کنید.

محمد پارسا کوشش replyپاسخ

سلام اقای علی محمدی ببخشید من این همه از شما سوال می کنم.
یک سوال داشتم . سوال من اینکه من می خواهم خطی که زیر متن هایی که در تگ های (h) ، (strong ) و (span)قرار دارد را ببرم . چگونه این کار را بکنم؟

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

سلام. خواهش میکنم دوست عزیز. این تگ ها به صورت پیش فرض خطی رسم نمی کنند. احتمالا از تگ a در داخل این تگ های استفاده شده و شما باید استایل text-decoration:none رو براش قرار بدین

محمد میرزایی replyپاسخ

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

لقمان آوند

درسته و ایرادی ندارن. تست کردیم.
لطفا حتما با PC دانلود کنید

محمد میرزایی

ممنون از راهنمایی شما

boyit replyپاسخ

با سلام و وقت بخیر
چرا من امکان دانلود فایل ها رو ندارم؟
وقتی روی لینک دانلود کلیک میکنم این پنجره رو برا من باز میکنه :
https://www.7learn.com/

لقمان آوند

از موبایل یا تبلت دانلود نکنید لطفا

boyit

با سیستم هستم اما همچنان مشکل دارم

لقمان آوند

با یه مرورگر دیگه تست کنید.

Reza Moradi replyپاسخ

سلام وقت بخیر
تو قسمتی که توضیح میدین برای دامنه مجازی وقتی تو system 32 فایل هاست اسم و آی پی رو وارد میکنیم سیستم اتوماتیک نام دامنه رو به اون آی پی ارجاع میده حتی اگر تو زمپ تغییرات رو تو vhost ندیم
چه لزومی داره زمپ رو هم کانفیگ کنیم؟؟؟

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

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

پویا راهواره replyپاسخ

با سلام خسته نباشید.
من در شروع جلسات کار با htnl css یه مشکلی دارم. وقتی ادرس 7learn.html رو تو نوار ادرس میزنم فایل ایندکس در مرورگر باز میشه ولی هیچ استایلی روش اجرا نمیشه در حالی که وقتی فایل ایندکس رو مستقیم در مرورگر باز می کنم مشکلی نداره و استایل ها اجرا میشن.

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

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

پویا راهواره replyپاسخ

سلام اقای محمدی
تدرس ها درستن چون وقتی فایل index.html که در پوشه ی public_html هست و با دابل کلیک باز می کنم استایل ها اعمال میشن
ولی وقتی ادرس 7learn.html رو میزنم همون اطلاعات توی index ، نمایش داده می شن منتها بدون استایل.

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

سلام بهتره مراحل رو از اول بازم چک کنید.

Amir Zakipour replyپاسخ

سلام آقای علی محمدی آموزش عالیه ممنون فقط یک مشکلی که دارم با آیکونای font awesome شکله مربع میشن توی قالب.فونتا هم رو سیستم نصبه توی فتوشاپ مشکلی ندارم باهاش.

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

سلام. به خاطر اینه که فونت نوشتاری بر روی فونت آیکن اعمال میشه

Mohammad Reza Kiani replyپاسخ

چطور می تونم فونت اضافه کنم؟

sajad azar replyپاسخ

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

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

سلام ویرایشگر notepad ++ رو نصب کنید.

عباس دلاوری replyپاسخ

سلام – من ساب دامین ساختم ولی موقع هجرا همچین پیامی برای من میاره

Object not found!
The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.

If you think this is a server error, please contact the webmaster.

Error 404
7learn.html
Apache/2.4.38 (Win64) OpenSSL/1.1.1b PHP/7.3.3
کیوان علی محمدی

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

میلاد بزرگی replyپاسخ

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

ارسال نظرات

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