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

در این آموزش یاد می گیریم که :

  1. post type نمونه کار رو بسازیم
  2. متاباکس گالری تصاویر رو بسازیم
  3. قالب برگه برای نمایش نمونه کارها رو بسازیم.

اصلا هم سخت نیست. ممکنه آموزش ساخت بخش نمونه کارها وردپرس رو در 2 یا 3 پارت توضیح بدم. البته خب باید کمی هم با php آشنا باشید

بسیار خب شروع می کنم

ساخت post type نمونه کارها

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

بسیار خب حالا فایل functions.php پوسته خودتونو باز کنید و کد زیر را در انتهای فایل قرار دهید.

فایل را ذخیره کنید و پیشخوان وردپرس را دوباره بارگذاری کنید. مانند تصویر زیر باید post type نمونه کارها اضافه شده باشد

post type نمونه کارها

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

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

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

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

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

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

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

متاباکس تصاویر نمونه کارها

کد های زیر را به فانکشن اضافه کنید:

و بعد این:

و در ادامه هم کد زیر:

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

 

فراخوانی اسکریپت ها و استایل ها برای باکس های آپلود

 

تعریف تابعی برای برگرداندن آی دی تصاویر. هر جا این تابع رو فراخون کنیم آی دی تصاویر رو چاپ می کنه

 

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

 

تعریف تابعی برای نمایش همه تصاویر نمونه کار

 

نکته: توجه داشته باشید که div ها و کلاس هایی که من در بالا گذاشتم رو مطابق با دیزاین مد نظر خودتون بزارید

حالا نوبت میرسه به ساخت قالب برگه بخش نمونه کارها

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

فایلی به نام portfolio.php ساخته و کد زیر را داخل آن قرار دهید

دانلود کد

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

توجه: در این مقاله آموزشی برای دیزاین و زیباسازی قرار داده نشده و زیباسازی به دست خودتون هستش

دانلود فایل های مورد نیاز:

فایل js گالری

[divider] [/divider]

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

موفق باشید

38 دیدگاه برای “ساخت بخش نمونه کارها وردپرس

  • مهدی طیبی
    - ۳ آبان , ۱۳۹۳

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

    ممنون .

  • بهنام رسولی
    - ۴ آبان , ۱۳۹۳

    سلام عالی بود ، راجب استفاده از کپچا تو وردپرس هم مطلبی بگذارید.

  • محمدجعفر خواجه
    - ۴ آبان , ۱۳۹۳

    سلام
    ببخشید لطفاً بگین اون فایل js آخری رو باید کجا بزاریم؟

    • الناز بیک زاده
      - ۵ آبان , ۱۳۹۳

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

      • محمدجعفر خواجه
        - ۷ آبان , ۱۳۹۳

        ببخشید باید در فایل هیدر فراخوانی کنم؟

        • الناز بیک زاده
          - ۱۰ آبان , ۱۳۹۳

          هدر یا فوتر فرقی نداره

  • رنجبران
    - ۱۹ آبان , ۱۳۹۳

    سلام. نمیدونم سئوالم به این بخش مربوط هست یا نه . خلاصه ببخشید
    ۱- راستش من میخوام ماژول درج خبر رو بزارم سایدبار سمت راست و یه سری خبر خودم رو بزارم توش . اما نمیدونم چه کنم ؟
    اصلا پلاگینی برای درج خبر وجود داره ؟ خبر رو خودم مینویسم و درج میکنم . جدا از اون درج نوشته خود وردپرس میخوام باشه .
    ۲- یه چیز دیگه هم میخوام و اونم درج مقاله س . آیا افزونه ای براش وجود داره ؟ چون هرچی گشتم چیزی تو مخزن وردپرس پیدا نکردم . میخوام مطالبمو توش بزارم و هرکی خوشش اومد یا نظر بده یا امتیاز .
    ۳- من از قالب Aggregate استفاده میکنم. و هر برگه ای که ایجاد میکنم توی قالب صفحاتی که داره همه اش یه چیزای ثابتی داره . یعنی من حتما باید قالب ارتباط با ما یا گالری و … حتما باید انتخاب کنم. من میخوام هیچکدومش تو برگه ام نیاد و همون مطلبی رو که نوشتم بهم نشون بده . واسه این چه کنم ؟
    شرمنده سئوالام زیاد شد .
    سپاسگزارم

    • الناز بیک زاده
      - ۲۰ آبان , ۱۳۹۳

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

      ساخت post type

      ساخت قالب برگه

  • رنجبران
    - ۲۳ آبان , ۱۳۹۳

    من از قالب Aggregate استفاده میکنم. و هر برگه ای که ایجاد میکنم توی قالب صفحاتی که داره همه اش بصورت پیش فرض یه چیزای ثابتی داره . مثل ماژول “یک نظر بدهید” و یا سایر ماژولها رو باید انتخاب کنم
    من میخوام هیچکدومش تو برگه ام نیاد و همون مطلبی رو که توی برگه نوشتم بهم نشون بده . واسه این چه کنم ؟
    بازم ممنون

    • الناز بیک زاده
      - ۳ آذر , ۱۳۹۳

      سلام دوست من. در بخشی که برگه جدید اضافه می کنید در بخش تنظیمات صفحه که بالای صفحه هستش گزینه دیدگاه ها رو فعال کنید تا متاباکسش نمایش داده بشه. بعد نمایش دیدگاه ها رو غیرفعال کنید. برای هر ادیت دیگه ای به فایل page.php در پوسته خودتون مراجعه کنید

  • mojtaab
    - ۱۷ آذر , ۱۳۹۳

    سلام خانم بیک زاده من یه قالب دارم میخوام به صورت پاپ آپ نشون بدم تا یه بخشی درسته ولی وقتی روی لینک هر عکس کلیک کردم به خوبی نمایش داده نمیشه میتونید کمک کنید؟

    • الناز بیک زاده
      - ۲۲ آذر , ۱۳۹۳

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

  • میزبانی وب هاست سنتر
    - ۲۳ دی , ۱۳۹۳

    آموزش کاملی بود ممنون

  • sajjad
    - ۲۲ اسفند , ۱۳۹۳

    سلام میشه بیشتر در مورد این باکس لینک نمونه کار توضیح بدین دقیقا چی کار میکنه !

    • الناز بیک زاده
      - ۲۶ اسفند , ۱۳۹۳

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

  • کریم
    - ۲۰ خرداد , ۱۳۹۴

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

    • الناز
      - ۷ تیر , ۱۳۹۴

      سلام دوست من. لطفا فایل هارو به ایمیل wpschool1@gmail.com بفرستید تا بررسی کنم و مشکل رو بهتون بگم

  • ابی
    - ۸ تیر , ۱۳۹۴

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

    • الناز
      - ۱۳ تیر , ۱۳۹۴

      این رشته فکر کنم ۲ سالی هست که اومده

  • مهرداد محمدی
    - ۱ مرداد , ۱۳۹۴

    با توجه به توضیحات داده شده آموزش کامل و مفیدی بود تشکر

  • مهرداد محمدی
    - ۱ مرداد , ۱۳۹۴

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

    تمام مراحل به درستی انجام شده .

    • الناز
      - ۶ مرداد , ۱۳۹۴

      فایل های js را دست فراخوانی کردید؟

  • مهرداد محمدی
    - ۷ مرداد , ۱۳۹۴

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

  • sara
    - ۱۳ مهر , ۱۳۹۴

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

    • الناز
      - ۲۴ مهر , ۱۳۹۴

      سلام سارا جان. برای حل مشکل بی نظمی باید از طریق css صفحه رو مرتب کنید. در خصوص اینکه توی صفحه داخلی تصویر شاخص نشون داده نشه باشد از داخل فایل single.php کد زیر رو بردارید
      the_post_thumbnail

  • هاست
    - ۸ آذر , ۱۳۹۴

    مفید بود ممنون از شما

  • مجید
    - ۲۵ اسفند , ۱۳۹۴

    سلام خسته نباشید , مفید بود .

  • omid
    - ۱۸ اردیبهشت , ۱۳۹۵

    نه عکس ها نشون داده میشه نه لینک درستش کنید دیگه

    • الناز
      - ۱۹ اردیبهشت , ۱۳۹۵

      دوست عزیز آموزشی که گذاشتم تست شده هستش و مشکلی نداره

      • omid
        - ۲۱ اردیبهشت , ۱۳۹۵

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

        • الناز
          - ۲۳ اردیبهشت , ۱۳۹۵

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

  • omid
    - ۲۶ اردیبهشت , ۱۳۹۵

    کدهام همینایی مه خودتون دادید / شما تابع نمایش اون متاباکسی که ساختید رو بگید

    • الناز
      - ۲۶ اردیبهشت , ۱۳۹۵

      portfolio_meta_box()

  • سرویس کودک
    - ۱ مرداد , ۱۳۹۵

    بسیار عالی ممنونم

  • دیجیتال مارکتینگ
    - ۱ مرداد , ۱۳۹۵

    ممنونم از سایت خوبتون

  • سعید
    - ۱۲ مرداد , ۱۳۹۵

    سلام مممنونم از سایت خوبتون واقعا کمک زیادی به من کرده

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

    • سیروس
      - ۱۷ مرداد , ۱۳۹۵

      بله البته.

  • امیرعلی
    - ۳۱ مرداد , ۱۳۹۶

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

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Captcha loading...