• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

طراحی قالب وردپرس (فصل اول – جلسه دوم) : راه اندازی پوسته

31676 ۶ شهریور ۹۲

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

ابتدا به پوشه وردپرس در مسیر زیر بروید :

در این پوشه، پوسته های نصب شده در ورپرس قرار می گیرند، که اگر به صورت پیشفرض باشد و پوسته ای نصب نکرده اید با ساختار زیر روبرو خواهید شد :

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

14 فایل! شاید زیاد باشند، اما ایجاد و کار کردن با همه ی آن ها بسیار آسان است ، توضیحاتی در مورد هر یک از این فایل ها :

  • Index.php : قالب صفحه اصلی
  • Header.php : کدهای سرصفحه در این فایل قرار می گیرند.
  • Footer.php : کدهای پاصفحه در این فایل قرار می گیرند.
  • Sidebar.php : کدهای ستون کناری در این فایل قرار می گیرند. البته اگر پوسته دارای 2 ستون کناری یعنی چپ و راست بود دوفایل right-sidebar.php و left-sidebar.php ایجاد می کنیم.
  • single.php : قالب مطالب.
  • Page.php : قالب برگه ها.
  • Loop.php : قالب مطالبی که در صفحه single.php و page.php قرار می گیرند.
  • Comments.php : قالب نظرات.
  • Search.php : قالب صفحه نتایج جستجو.
  • Searchform.php : کدهای فرم جستجو.
  • Archive.php : قالب صفحه آرشیو مطالب.
  • Functions.php : توابع پوسته، دراصل با استفاده از این فایل می توان امکانات بیشتری برای پوسته ایجاد کرد. که پر استفاده ترین امکان نیز ، پشتیبانی از ابزارک هاست.
  • 404.php : قالب صفحه خطای 404 (Not Found)
  • Style.css : استایل پوسته

حال که با فایل های یک پوسته ی وردپرس آشنا شدیم سراغ پوسته خودمان می رویم...

ایتدا یک پوشه جدید در پوشه ی themes در کنار سایر پوسته ها ایجاد کنید، نام آن مهم نمی باشد (من نامش رو mytheme می ذارم.) و سپس فایل های قالبی که ایجاد کردیم، یعنی فایل index.html، پوشه ی images و پوشه ی css را در داخل این پوشه منتقل می کنیم.

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

برای اینکه این مشکل را حل کرده و پوسته را راه اندازی کنیم ابتدا فایل style.css را از پوشه css بیرون آورده و در کنار index.html قرار دهید

حال اگر صفحه پوسته ها در بخش مدیریت را ریفرش کنید، توضیح به "پوسته گم شده" تبدیل می شود، دلیل آن نبود فایل index.php است. پس باید فرمت فایل را از html به php تبدیل کنید، میتوانید یک فایل جدید با فرمت php و با نام index ایجاد کرده و کدها را  در آن پیست کنید اما برای اینکه یونیکد فایل نیز خراب نشود. کار زیر را انجام دهید :

از Control Panel وارد Folder Options شوید و در تب view  تیک گزینه hide extentsions for known file type رو بردارید و اوکی کنید.

حال اگر به پوشه پوستمان برگردید، می بینید که فرمت فایل ها نیز در کنار آن ها نمایش داده می شود. حال فقط کافیست  فایل index.html را Rename کنید و کلمه html را به php تبدیل کنید و در پیغامی که ظاهر می شود yes را بزنید.

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

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

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

اما اگر پوسته خودمان را فعال کنیم هیچگونه اطلاعات خاصی ندارد

برای اضافه کردن این اطلاعات فایل style.css را در ویرایشگر کد باز کرده و کدهای زیر را در اولین خط فایل قرار دهید

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

برای اضافه کردن تصویر پوسته نیز می توانید فایل logo.png موجود در پوشه ی images را کپی کنید و در کنار فایل style.css پیست کنید سپس نام آن را به screenshot.png تغییر دهید. حال اگر دوباره صفحه پوسته ها را ریفرش کنید، می بینید که تصویر پوسته نیز در کنار اطلاعات نمایش داده شده است :

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 28 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام
    برای بازشدن عکس های که درindx.phpقرارداردبایدازچه کدی برای نمایش عکس هادروردپرس استفاده کرد؟
    لطفاً یک مثال هم دراین موردبرای آموزش بزنید
    باتشکر

  • ‏‏

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

    • ‏‏
      سجاد دریس(۱۲ شهریور ۱۳۹۲)

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

  • ‏‏

    ممنون
    منتظرادامه آموزش هستم
    باتشکر

  • ‏‏
    upvc بازار(۲۸ شهریور ۱۳۹۲)

    منتظرادامه آموزش هستم این آموزش چون ویدیویی نیست معمولاًزودترمی بایست آماده می شد.

  • ‏‏

    در سال 2013 همه جای دنیا دارند اموزش قالب وردپرس رو با html5 , css3 میزارن توی ایران ما هزار تا سایت دارند اموزش رو با html1 میزارن
    تازه نصفه و نیمه
    توی سایتهای خارجی با یه سرچ میشه بهترین امزش رو پیدا کرد
    توی ایران و زبان فارسی هر چی رو سرچ میزنی میاد به این سایت
    و تازه جالبترش اینه خیلی وقتها واسه دوخط اموزش هزار تا کلمه نوشتن واسه رندر موتور جستجو که اصلا ربطی به مقاله شون هم نداره
    دوستان عزیز یه کم واسه نوشتن دیسکریپشن ها و معرفی وب سایتشون به موتور جستجو ملاحضه کنن
    واقعا خسته نمیشین این همه خودتون رو بی جهت ….
    واقعا که
    حداقل …..
    اخه ادم چی بگه به امثال شما ……
    والله نیدونم به خدا
    ولی من خسته شدم از بس تو سرچ هام این سایت میاد و هیچ محتوای هم مربوط به سرچ مذکور و سرچ زده شده نداره
    و جالبتر با blocker هم بلاکش کردم اما از بلاکر سرچ هم رد میشه از بسکه توضیحات بیخودی به موتور جستجو داده

    • ‏‏
      کیوان علی محمدی(۱۵ مهر ۱۳۹۲)

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

  • ‏‏
    f_talebi(۱ آذر ۱۳۹۲)

    بنظرمن سایتتون خیلی خوبه و آموزش هاتون عالین. من که جدا استفاده کردم… واقعا دستتون درد نکنه و خدا قوت

  • ‏‏
    f_talebi(۱ آذر ۱۳۹۲)

    یه سوال داشتم : آموزش وردپرس فصل اول-جلسه سوم کجاست؟

    و چرا این آموزش وردپرس رو جز سری های آموزشی نمیکنید ؟ که دسترسی به تمام آموزشهاش راحت باشه…

    • ‏‏
      سجاد دریس(۳ آذر ۱۳۹۲)

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

  • ‏‏
    بهرام(۱۳ بهمن ۱۳۹۲)

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

  • ‏‏
    Mohammad baroni(۱۸ مرداد ۱۳۹۳)

    سلام خسته نباشید
    شما دارید ویرایش یاد میدید ؟!
    بنظرم اگه ساخت رو یاد بدید بهتره

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram