دوره مجازی قالب وردپرس (جلسه 11) : کدنویسی اسلایدر و تبدیل آن به html و css

دسته بندی: وردپرس
زمان مطالعه: 1 دقیقه
۰۵ مهر ۱۳۹۴

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

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

  • تکمیل بخش منوی اصلی
  • کدنویسی بخش جتسجو
  • کدنویسی و پیاده سازی بخش اسلایدر
:: توجه

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

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

چه امتیازی به این مقاله می دید؟
نویسنده
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

جلسات دوره

نظرات کاربران

نازمحمد گری

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

fontawesome-webfont.woff:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fontawesome-webfont.ttf:1 Failed to load resource: the server responded with a status of 404 (Not Found)
نازمحمد گری

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

Mohammad Reza Kiani

سلام مشکل این کد چیه وقتی ایکون های لوکیشن و تلفن و ایمیل را می خواهم بیارم سمت چپ یکدفعه لگو و ایکون ها حذف می شوند

HTML : 
<!–StartHeader–>
    <header id="top-header">
        <div class="container">
         <div id="logo">
            <a href="http://hessfilm.ir/">
                <img  width="150" height="150" src="img/2.png" alt="آمازون">
                <h1>باکس اکانت</h1>
            </a>
        </div>
            <div id="contact-bar">
                <a href=""><i class="fa fa-mobile"></i>|</a>
                <a href=""><i class="fa fa-map-marker"></i>|</a>
                <a href=""><i class="fa fa-globe"></i></a>
            </div>
        </div>

      </div>
    </header>

<!–EndHeader–>


CSS :
/*start header*/
#top-header{
    height: 200px;
    width: 1005%;
}
#top-header #logo {
    float: right;
    margin: 30px 10px 10px 10px;
}
#top-header #logo a {
    text-decoration: none;
}

#top-header #logo a h1{
    display: inline-block;
    font-family:yekan ;
    color : #1A3C40;

}
#top-header #contact-bar {
    float: left;
    padding-top: 70px;
    font-size: 25px;
}
/*End header*/
محمد پارسا کوشش

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

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

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

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

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

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

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

زارعی هوشیار

سلام خدمت اقای علی محمدی……خسته نباشید….تا اینجا آموزش هاتون دنبال کردم خیلی خوب ….تشکر میکنم….یه سوال داشتم که خیلی وقته ذهن منو مشغول کرده….؟تفاوت idو name در تگ های اچ تی ام ال چی هستش….در چه وقت هایی از name باید استفاده کنیم….و چه وقت هایی از id
و یه سوال مربوط به همین جلسه هستش اونم اینکه transform دقیقا نسبت به اندازه ای تگ والد ی که relative داره جابجایی درصدی داره یا نسبت به خود شی ….که در این جلسه لینک بعدی یا قبلی هستش…برفرض مثال اینکه ارتفاع شی ۵۰پیکسل باشه وقتی از trasform در محور y به مقدار ۵۰%استفاده کنیم یعنی ۲۵ پیکسل جابجا میشه…ایا این درسته؟

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

سلام دوست عزیز. ممنون. id برای الصاق یک شناسه منحصر به فرد به المنت مورد نظر در صفحات html به کار میره در حالی که name معمولا برای تگ های اطلاعات در form ها استفاده میشه تا با استفاده از این name اطلاعات اونها در سمت سرور قابل دریافت باشه.مطمئن نیستم ولی فکر میکنم نسبت به خود شی جا به جایی داره.

زارعی هوشیار

مرسی….همون چیزی که حدس میزدم
تشکر از پاسختون….

وحید نوبخت

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

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

فقط کافیه دکمه رو از نوع submit قرار بدین.

reza دولت

سلام
چطور میتونم تو قالبم اسلایدر با بکگراند ترانسپرنت داشته باشم؟

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

سلام تصاویر png با قابلیت transparent رو امتحان کنید.

Alireza Ph

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

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

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

Alireza Ph

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

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

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

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

چشم اونجا کاملا با مثال و کاربرد توضیح میدیم.

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

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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