آموزش طراحی وب

آموزش ساخت پوسته ی وردپرس قسمت اول

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

wp

فصل ششم : ساخت پوسته ی وردپرس

جلسه دوم : آموزش ساخت صفحه ی index.php  در پوسته ی وردپرس

 

سلام خدمت شما همراهان عزیز مدرسه مجازی ایرانیان

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

wordpress

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

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

در این جلسه میخوام نحوه ی ایجاد فایل های index.php , header.php , sidebar.php , footer.php رو خدمتتون آموزش بدم.

همونطور که میدونید فایل index.php صفحه اصلی سایت شمارو نمایش میده. فرض کنید ما یک پوشه داریم که شامل فایل css , js و html های ما میشه، فایل index.html که قراره تبدیل کنیم رو از این لینک دانلود کنید.

همونطور که میبینید این قالب شامل یک هدر ، سایدبار ، آخرین پست های ارسالی و یک فوتر هست. حالا ما میخوایم این صفحه html رو به فایل index.php پوسته ی وردپرس تبدیل کنیم.

ابتدا فایل index.html رو به فرمت index.php تبدیل می کنیم.

بعد از تبدیل فرمت کدهای بخش head رو cut می کنیم و در فایل جدیدی بنام header.php ذخیره می کنیم:

خوب تا اینجا شما فایل header.php رو ایجاد کردید حالا باید توابع و کدهای مربوط به این فایل رو در اون درج کنید. برای دریافت اطلاعات این بخش از توابع زیر استفاده میکنیم :

نمایش نام و عنوان وبلاگ :

 

نمایش عنوان مطلب در صفحات داخلی :

 

دریافت آدرس پوسته :

 

خوب از این توابع استفاده می کنیم و کدمون رو بصورت زیر تغییر میدیم:

 

تو فایل header.php شما باید کدهای پیش فرض دیگه ای هم بذارید که به استاندارد سازی پوستتون کمک میکنه:

 

تابع wp-head برای اجرای بیشتر افزونه ها نیازه و اگر این تابع رو استفاده نکنید ممکنه اکثر افزونه هایی که نصب می کنید اجرا نشه.

خوب تا اینجا فایل header.php رو ساختیم حالا باید اون رو در index.php فراخوانی کنیم ، چرا؟ چون کدهای مربوط به head رو برداشتیم و تو فایل header.php قرار دادیم حالا باید این فایل رو در جای قبلی head در index.php فراخوانی کنیم تا اون کدهارو بخونه و در اون مکان لود کنه.

چونکه header.php یکی از فایل های اصلی پوسته ی وردپرس هست برای فراخوانیش یه تابع از پیش تعریف شده وجود داره:

این تابع رو در جای قبلی head در index.php قرار دادیم. حالا میریم سایدبار پوستمون رو بسازیم. پس کدهای مربوط به سایدبار رو جدا می کنیم و در فایل sidebar.php ذخیره می کنیم.

حالا که کدهارو در sidebar.php ذخیره کردیم باز هم باید در فایل index.php اون رو فراخوانی کنیم. سایدبار هم یکی از فایل های اصلی پوسته ی وردپرس هست و تابع فراخوانی رو از قبل تعریف شده:

خوب حالا بخش نمایش آخرین پست هارو هم برمیداریم و در یک فایل با نام دلخواه ذخیره می کنیم تا تمامی بخش هارو مرتب در فایل های مربوط به خودشون قرار بدیم و index رو خلوت کنیم، من کدهارو برمیدارم و در فایلی بنام lastposts.php ذخیره می کنم:

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

خوب حالا نوبت میرسه به فوتر سایتمون ، که اون رو برمیداریم و در فایلی بنام footer.php ذخیره می کنیم:

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

در کل در پوسته ی وردپرس برای فراخوانی فایل های اصلی ، وردپرس توابع زیر رو در اختیار ما قرار میده و برای فراخوانی بقیه ی فایل ها باید از include استفاده کنیم :

خوب یه مورد دیگه مونده اون هم قرار دادن ادرس template یا پوستمون برای لینک جی کوئری هست:

همونطور که میدونید پوسته در آدرسی مشابه آدرس زیر در سایت ما قرار داره:

http://yourDomain.com/wp-content/themes/yourtemplate

برای همین چون در ریشه و Root اصلی سایت قرار نگرفته ، برای فراخوانی فایل هایی مثل css و js ها باید مسیر پوسته رو ابتدای لینک اونها قرار بدید.

در آخر و کار نهایی که باید تو فایل index.php انجام بدیم عنوان سایت رو در h1 قرار بدیم که اگر خاطرتون باشه گفتم از تایع <?php bloginfo(‘name’); ?> استفاده می کنیم:

تا اینجا ما فایل های index , header , sidebar , footer رو ایجاد کردیم و index.php رو کامل کردیم. نتیجه ی کد index.php ما به شکل زیر شد:

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

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

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

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

موفق و پاینده باشید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۹

  • آموزش عالی بود
    منتظر ادامه آموزشتون هستیم
    راستی اگر اشکال نداشته باشه میخوام مطلب شما را با ذکر منبع در یکی از انجمنها منتشر کنم

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

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

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

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

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

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

  • با سلام ؛
    به نظر من آموزش های آقای همت یار (مدرسه مجازی) یکی از کامل ترین منابع آموزشی زبان های برنامه نویسی و به طور کلی طراحی سایت هست .من ویدئو های آموزشی و مطالب زیادی مطالعه کردم ولی بی فایده بود تقریبا ولی با خوندن فصل Html , CSS تو نستم کد نویسی رو یادبگیرم .حالادارم مطالب وردپرس و PHP رو مطالعه می کنم .

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

  • سلام
    خسته نباشید . آموزش خیلی خوبی بود
    یک سوال داشتم
    چرا از دستور زیر استفاده کردیم ؟
    <script src="/js/jquery.min.js”>

    کد بالا برای attach کردن جی کوئری قالبمون هست یا جی کوئری مربوط به وردپرس ؟

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

  • با سلام
    استاد من تمام این آموزش یک ب یک انجام دادم
    ولی این خطا برای تابع get_header() تو فایل index میده
    Fatal error: Call to undefined function get_header() in K:\wamp\www\html\index.php on line 3
    برای تابع footer و بقیه همین این خطا میده!

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

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

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

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

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

  • سلام…و خیلی ممنون از آموزش خوبتون.
    یه سوال داشتم …توی فایل header.php نیازی نیست که تگهای header ک توی body هست رو هم توی این فایل قرار بدهیم؟اگه قرار بدیم بهتره یا نه؟فرقی میکنه؟
    ممنون

    • سلام دوست عزیز
      header که در body استفاده میشه صرفا یه عنصر هست که ممکنه چندین و چند مرتبه استفاده بشه. header اولیه میتونه داخل header.php باشه میتونه هم نباشه، سلیقه ای هست. قانون خاصی نداره، اما head باید داخل این فایل باشه.
      موفق باشید.

  • با سلام و خسته نباشید
    در خواستی داشتم.
    ایا میشه اماده سازی یک پوسته html رو برای ووکامرس اموزش بدین؟
    من داخل نت منابع خوبی پیدا نکردم که بتونه بهم کمک کنه.
    با سپاس

  • سلام
    ببخشید من دقیقا متوجه نشدم برای چی هست
    مگه برای نمایش عنوان مطلب نیست ؟!
    پس چرا در index.php ازش استفاده شده ؟!

    • سلام دوست عزیز
      دقیقا راجع به چی صحبت می کنید؟ اگر title هست ، زمانی که تو single استفاده بشه ، عنوان مطلب در حال نمایش رو نمایش میده، اگر داحل حلقه استفاده بشه و مثلا بخواین لیست مطالب رو مشاهده کنید ، عنوان هر مطلب رو در جایگاه خودش نمایش میده. حالا میتونه تو index باشه میتونه هر صفحه ی دیگه ای باشه.
      موفق باشید

  • سلام
    ببخشید یادم رفت کد مذکور رو paste کنم ! دی:
    منظورم کد زیر در header.php هست :

    |

    قطعا در صفحه index.php ، محتویات header.php هم نمایش داده میشه چون در ایندکس ، از get_header(); استفاده شده !

    الان کد بالا در index.php به صورت زیر نمایش داده میشه :
    ایران وب لرن |

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

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

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

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

اموزش تصادفی