| حی و حاضر در خدمت شما هستیم
صفحه اصلی » » اضافه نمودن باکس درباره نویسنده مثل آب خوردن
مقاله وردپرسی

اضافه نمودن باکس درباره نویسنده مثل آب خوردن

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

wordpress author box

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

 وارد نمودن اطلاعات کاربر

شناسه-کاربران

بیشتر این اطلاعات در قسمت کاربران در پنل ادمین (پیشخوان) و “شناسنامه شما” وارد می شود. پس در ابتدا پس از ایجاد یک کاربر جدید، سعی کنید تمام اطلاعات مربوط به آن را وارد همان قسمت نمایید.

گزینه های مربوط به چگونگی نمایش نام شما را تنظیم کنید و نام وبسایت کاربر را پر نمایید و “زندگی نامه” کوتاهی نیز در مورد نویسنده بنویسید.

کدنویسی HTML

فایل single.php را باز کنید و کد اولیه HTML را در آن وارد کنید. تمام قسمت اطلاعات نویسنده در یک div با نام author-info قرار می گیرد. داخل این div اینک تصویر پروفایل قرار می گیرد، و پس از آن div حاوی اطلاعات نویسنده که شامل نام او و پاراگراف زندگی نامه می شود قرار دارد.

استایل با سی اس اس

حال که HTML در جای خود قرار گرفت، با سی اس اس همه چیز را آن گونه که می خواهیم تغییر می دهیم. در اینجا استایل div اصلی یعنی author-info را با بک گراند خاکستری، کمی padding  و یک حاشیه از پایین داده ایم. با border- radius لبه ها را گرد کردیم و تصویر نویسنده نیز به سمت چپ منتقل شده است.

اضافه نمودن تگ های قالب

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

تگ قالب the_author_meta() را می توان در بسیاری از کدهایی که مربوط به اطلاعات نویسنده است، به کار برد که در این حالت به این منظور به کار می رود که URL نویسنده را بیابد.

تگ قالب get_avatar() برای به دست آوردن نویسنده به کار می رود و تگget_the_author_meta(‘user_email’) نیز برای قرار دادن ایمیل نویسنده در پارامترها استفاده می شود.

تگ the_author_link() نیز کار ساده ای انجام می دهد. نام نویسنده را به نمایش می گذارد و آن را به صورت خودکار به آدرس وبسایتی که کاربر قبلا آن را در قسمت “شناسنامه شما” لینک می کند.

در نهایت تگ the_author_meta() بار دیگر به کار گرفته می شود، اما این بار با پارامتری که اطلاعات نویسنده (یا همان اطلاعات زندگی نامه ای نویسنده) را به نمایش می گذارد.

کمی بیشتر…

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

نمایش تمام نوشته های نویسنده

نمایش تعداد نوشته های نویسنده

لینک به آدرس AIM نویسنده

خداوندا! وردپرس و کدهایش را از ما نگیر!

وردپرس با طعم فارسی

امتیاز: 4٫00
برچسب ها
اشتراک گذاری

۱۷ دیدگاه

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

  1. esmail در تاریخ ۲۱ شهریور ۱۳۹۱:

    با سلام خدمت شما
    بنده صاحب وب سایت [] هستم که یک سایت تفریحی و دانلود است ، الان نزدیک به یک سال میشه که این سایت رو راه اندازی کردم ولی متاسفانه اصلا نتونستم براش خوب وقت بذارم .
    تصمیم گرفتم که سایت تفریحی و دانلود رو تعطیل کنم و بیشتر تو زمینه طراحی وب سایت فعالیت کنم به خاطر اینکه هم به این زمینه علاقه زیادی دارم و هم اینکه بهتر نتیجه میده .
    از یک طرف وقت زیادی ندارم که مدیریت کامل یک سایت رو بر عهده بگیرم و از طرفی هم نه هزینه کافی رو دارم به خاطر همین تصمیم گرفتم تو سایت های آموزشی فعالیت کنم . تمایل دارم که باهاتون همکاری کنم . می تونم در قسمت مطالب آموزشی ، طراحی قالب و … فعالیت کنم .

    چند تا سوال : چرا سایتتون قالب اختصاصی نداره ؟ هر کاری و هر پایگاهی برای ادامه حیات به کسب درآمد نیاز داره ، آیا واسه این کسب درآمد برنامه‌ای دارید ؟

    با تشکر از شما

  2. یوسف در تاریخ ۲۱ شهریور ۱۳۹۱:

    سلام.

    دستت درست چند تا کد رو تست کردم جواب نداد باید این رو هم تست کنم.
    در مورد دعات هم آمین :))

    با تشکر از زحماتت

  3. رضا در تاریخ ۲۲ شهریور ۱۳۹۱:

    مرسی اقا من علاقه دارم به وردپرس دارم اطلاعاتمو کامل می کنم

  4. رضا فخری در تاریخ ۲۲ شهریور ۱۳۹۱:

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

  5. سون گرافیک در تاریخ ۲۲ شهریور ۱۳۹۱:

    عالی بود…خسته نباشید

  6. یونس در تاریخ ۲۲ شهریور ۱۳۹۱:

    بهترین و مفیدترین سایت ایرانی درباره وردپرس سایت شماست

    اما پیشنهاد می کنم ظاهر سایت هم حرفهای کنید چون خودتون حرفه ای هستید

    من همیشه مطالبتون رو دنبال می کنیم و برات تبلیغ می کنم

    به امید موفقیتت در زندگی

  7. شهاب در تاریخ ۲۳ شهریور ۱۳۹۱:

    دادا عالییییییییییییییییییییییییییییییییییهههههههههههههه

  8. hos7ein در تاریخ ۲۴ شهریور ۱۳۹۱:

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

  9. مهدی در تاریخ ۲۶ شهریور ۱۳۹۱:

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

    • wpfarsi در تاریخ ۲۶ شهریور ۱۳۹۱:

      نه آقا. این با فتوشاپه.

  10. علی در تاریخ ۲۷ شهریور ۱۳۹۱:

    سلام خسته نباشی عزیز… کارت درست!

    راستی همه کدهاتو تست کردم…. بدون استثنا هیچ کدوم کار نکردن!!!

    • wpfarsi در تاریخ ۲۷ شهریور ۱۳۹۱:

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

      • kaliran در تاریخ ۲۵ مهر ۱۳۹۱:

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

  11. arta در تاریخ ۳۰ شهریور ۱۳۹۱:

    سلام دوست عزیز
    خسته نباشید
    میخواستم بدونم باید چه تغییری در css بدم که در توضیحات وقتی “Enter (برای رفتن به خط بعدی)” استفاده کنم . در هنگام نمایش هم نوشته ها به خط بعدی بروند ؟
    با تشکر

  12. جعفر در تاریخ ۸ فروردین ۱۳۹۲:

    سلام
    چطوری اصلاعات فیس بوک و توییتر رو به همراه ایکون اضافه کنیم؟
    ممنون

  13. BALYAN در تاریخ ۱۹ خرداد ۱۳۹۲:

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

  14. اونترنت در تاریخ ۱۲ خرداد ۱۳۹۳:

    ایول

پاسخ دهید

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