نمایش اطلاعات نویسنده در زیر مطالب وبلاگ های وردپرسی


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

مرحله اول : ویرایش فایل های PHP قالب وبلاگ خود

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

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
<div>
<h4>نوشته شده توسط <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(''); ?></p>
<p><?php the_author_firstname(); ?> در مجموع <span><?php the_author_posts(); ?></span> مطلب نوشته است.</p>
</div>
</div>

مرحله دوم : ویرایش فایل Style.css قالب وبلاگ خود

خوب در مرحله بعد کافی است با ویرایش فایل Style.css خود و اضافه کردن کدهای زیر به آن کار اضافه کردن کادر نمایش اطلاعات نویسنده مطلب به پایین هر مطلب تمام می شود.

#authorbox{
background:#EFEFEF;
border:1px solid #CECFD0;
width:550px;
margin:0 auto;
margin-bottom:10px;
overflow:hidden;
}
#authorbox img{
margin:0;
padding:10px;
float:right;
}
#authorbox h4{
font-size:16px;
color:#191919;
margin:0;
padding:10px 10px 5px 10px;
}
#authorbox p{
color:#191919;
margin:0;
padding:0px 10px 10px 10px;
}
#authorbox h4 &amp;gt; a{
text-decoration:none;
}
#authorbox p{
color:#191919;
}
.authortext{
padding-right:100px;
}

توجه داشته باشید برای تغییر ظاهر نمایش این کادر می توانید به سادگی این کدهای CSS را ویرایش کنید و در نهایت با طی کردن این دو مرحله در پایین مطالب وبلاگ شما کادری مانند تصویر زیر به صورت اتوماتیک نمایش داده می شود.

البته فونت ها به فونت پیشفرض وبلاگ شما تغییر می کنند

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

تصویر : برای تصویر نویسنده از تصویر گراواتار آدرس ایمیل پیشفرض که در حساب کاربری نویسنده تعریف شده است استفاده می شود. در کد به صورت پیش فرض تعیین شده است که تصویر نویسنده 80 پیکسل در 80 پیکسل نمایش داده شود که با تغییر مقدار 80 در فراخوانی تابع «get_avatar» می توانید این اندازه را تغییر دهید.
توضیحات کوتاه : این نوشته هم از اطلاعاتی که در حساب کاربری نویسنده در وبلاگ ذخیره شده است برداشته می شود با استفاده از فراخوانی تابع «the_author_description» .
نام کوچک و تعداد مطالب : نام کوچک نویسنده همانطور که می بینید با استفاده از فراخوانی تابع «the_author_firstname» و تعداد نوشته های آن با استفاده از فراخوانی تابع «the_author_posts» نمایش پیدا می کنند.

کرک نکنیم از تورتک آخرین نسخه نرم افزار های رایگان را دانلود کنیم

همچنین بخوانید :
چونگی تصویر پیش فرض نظر دهندگان در وبلاگ های وردپرسی

همچنین با دنبال کردن خوراک مطالب (?) آی تی گشت از آخرین مطالب با خبر شوید و یا با عضویت رایگان در خبرنامه آی تی گشت آخرین مطالب را در ایمیل خود بخوانید.

Advertisements

, , ,

  1. #1 توسط محمد جواد نوری در 2010/11/20 - 8:32 ب.ظ.

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

  2. #2 توسط محسن غیاثی در 2010/11/21 - 12:10 ق.ظ.

    سلام
    مطلب مفیدی بود. یادمه تو انجمن هم بعضی دوستان دنبالش بودن.

  3. #3 توسط Shabnam naghebi در 2010/11/21 - 8:22 ق.ظ.

    خیلی جالبه خسته نباشید.

  4. #4 توسط farsipress در 2010/11/21 - 12:21 ب.ظ.

    سلام
    جالب بود

  5. #5 توسط سامان در 2010/11/21 - 1:20 ب.ظ.

    عالی بود
    آقای يزدی از شما تقاضا دارم درباره اين ترفنده های جالب وردپرسی در آيتده بيشتر بنويسيد.

    با تشكر

  6. #6 توسط سعید در 2010/11/21 - 4:09 ب.ظ.

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

    • #7 توسط itgasht در 2010/11/21 - 5:57 ب.ظ.

      ممنون سعید جان از توجه شما. در نوشتن استایل سعی شده خیلی ساده باشد تا هم در اکثر قالب های استاندارد این کادر به درستی نمایش پیدا کند و هم بیشتر خاصیت ها از فایل استایل اصلی ارث برده شود. از CSS 3 استفاده نکردم چون بیشتر قالب های دوستان با html 5 نوشته نشده و گفتم شاید مشکل ایجاد کند. فقط کافیه یک مقدار تو کدهای استایل دوستان تغییرات ایجاد کنند تا هم شخصی سازی بشه هم بهترین ظاهر را با توجه به قالبشون به این کادر بدهند.

  7. #8 توسط سعيد در 2010/11/21 - 6:04 ب.ظ.

    ممنون..
    واقعا مطلب عالي و مفيدي بود..
    ولي واسه كسايي مثله خودم كه تمامه فايل هاي قالبشون توي index سشون هستش چي..؟؟
    كد اوليه كه PHP هستو كجا بايد وارد كنيم؟؟
    موفق باشي دوست عزيز../.

    • #9 توسط itgasht در 2010/11/22 - 3:24 ق.ظ.

      سعید جان ممنون از تذکر شما یادم رفت در مورد قالب های تک فایله تو متن اصلی بنویسم. خوب اگر قالب تون آزاد هست ( منظورم اینه که Encode شده نیست با کمی جستجو تو کدهای آن می تونید به راحتی قسمت نظراتش رو پیدا کنید ( معمولاً دنبال کلماتی مانند comment تو فایل بگردید زود پیدا می کنید ) و قبل از کدهای نمایش نظرات این کد را قرار دهید و با آزمون و خطا ( منظورم امتحان چند باره جاگذاری کد ها در قسمت های مختلف است که بهتره که تو local این کار رو بکنید ). البته اگر برای این کار یک افزونه هم پیدا بکنید که یک همچین کاری بکنه و مثل افزونه های اشتراک گذاری خودش اتوماتیک این کادر رو به آخر صفحات Single اضافه کند هم مشکل برطرف می شود که من خودم نتونستم افزونه خوبی رو پیدا بکنم.

  8. #10 توسط سجاد در 2010/11/21 - 8:50 ب.ظ.

    بابا دمت گرم
    خیلی دنبالش بودم
    خداخیرت بده

  9. #11 توسط شایسته در 2010/11/21 - 9:07 ب.ظ.

    دست شما ممنون دوست عزیز 😡

  10. #12 توسط سعيد در 2010/11/22 - 10:43 ب.ظ.

    با تشكر از شما..
    فقط يه سواله ديگه..
    كدهاي CSS كه گفتيد رو دقيقا بايد كجاي style قرار بديم..
    يا اگه هر كجا قرار بديم درست كار ميكنه..
    موفق باشي دوست عزيزم../.

    • #13 توسط itgasht در 2010/11/23 - 1:15 ق.ظ.

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

  11. #14 توسط سعيد در 2010/11/23 - 7:29 ب.ظ.

    بازم ممنون از شما دوست گلم..
    فقط يه مشكلي دارم ..
    لطفا اين عكسو ببينيد..

    همون طور كه ميبينيد سايز قسمتي كه اضافه شده با پوسته هماهنگ نيست..من از CSS سايز هارو تغيير دادم ولي با اين كار هيچ تغييري توي سايز اون قسمت حاصل نميشه و انگار كاري انجام ندادي..من ميخوام قسمت توضيحات نويسنده كه اضافه شده با ستون وسطه قالبم ست و به يك اندازه باشه..
    لطفا راهنمايي كنيد دوست عزيزم..
    با تشكر..

    • #15 توسط itgasht در 2010/11/24 - 3:39 ق.ظ.

      ممنون که با هر کدام از این سوال هاتون دارید به من و دیگر بازدید کنندگان این مطلب کمک می کنید تا این مطلب کامل تر شود. سعید جان همانطور که می بینید در استایل #authorbox{ با عرض 550 پیکسل تعریف شده است کافیه این مقدار را کمتر کنید تا نتیجه مطلوب بدست آید. البته می تونید بجای پیکسل از درصد هم استفاده کنید مثلاً بنویسید width:100%; یعنی به اندازه کل قسمت وسط وبلاگ تون. اما اگر تغییر می دهید و تغییرات انجام نمی شود به خاطر این است که همانطور که می بینید از استایل خارجی استفاده شده که این امر باعث می شود وقتی یکباز این صفحه رو دیدید فایل استایل در سیستم شما ذخیره شود تا در مراجعات بعدی دیگر نیاز به دریافت این فایل نباشد و سرعت بارگذاری صفحه بالا رود که برای حل این مشکل در مرورگر IE , Firefox کافیه که در این صفحه Ctrl + F5 رو بزنید تا فایل CSS از سرور دوباره درخواست شود. اگر مشکلتون حل نشد خبر بدید تا بیشتر روش کار کنیم ولی فکر می کنم اگر باز هم درست نشد مشکل از قالبتون باشه.

  12. #16 توسط encaria در 2010/11/23 - 11:12 ب.ظ.

    خیلی خوبه علی جان تو انجمن دیده بودم چند نفری دنبال این آموزشن

  13. #17 توسط سعيد در 2010/11/24 - 3:09 ب.ظ.

    سلام علي آقا..
    منم از شما ممنونم دوست عزيزم كه راهنماييم ميكنيد..
    همون طور كه گفتید مشكل از كوكي ها بود و با Ctrl + F5 درست شد.
    عرضشو از 550 به 500 تغيير دادم درست شد…ولي مشكله اصلي اون (صفحه 1 از 0) بود كه زير پستام توي ادامه مطلب مي اومد و هماهنگي شو بهم ميزد..
    كه اونم ببينم چه طوري ميتونم برش دارم…بازم متشكرم ازتون دوست عزيزم..
    با تشكر..موفق باشي../