اضافه نمودن باکس درباره نویسنده مثل آب خوردن
معمولا وجود یک باکس حاوی اطلاعات مربوط به نویسنده (درباره نویسنده و اطلاعاتی در مورد وی) در انتهای نوشته امری رایج است؛ مخصوصا در وب سایتهایی که دارای چندین نویسنده هستند. با استفاده از چند خط کد ساده می توان به راحتی تصویر نویسنده، نام او، لینک به وبسایتش و یک بیوگرافی کوتاه در انتهای نوشته اش را تعبیه نمود.
قسمت مربوط به اطلاعات نویسنده معمولا در انتهای یک نوشته قرار می گیرد، پس ما کد را در فایل single.php اضافه می کنیم. هدف، نمایش نام نویسنده، لینکی به وب سایت او، تصویر پروفایل نویسنده به صورت خودکار و اطلاعات مختصری از او می باشد.
وارد نمودن اطلاعات کاربر
بیشتر این اطلاعات در قسمت کاربران در پنل ادمین (پیشخوان) و “شناسنامه شما” وارد می شود. پس در ابتدا پس از ایجاد یک کاربر جدید، سعی کنید تمام اطلاعات مربوط به آن را وارد همان قسمت نمایید.
گزینه های مربوط به چگونگی نمایش نام شما را تنظیم کنید و نام وبسایت کاربر را پر نمایید و “زندگی نامه” کوتاهی نیز در مورد نویسنده بنویسید.
کدنویسی HTML
فایل single.php را باز کنید و کد اولیه HTML را در آن وارد کنید. تمام قسمت اطلاعات نویسنده در یک div با نام author-info قرار می گیرد. داخل این div اینک تصویر پروفایل قرار می گیرد، و پس از آن div حاوی اطلاعات نویسنده که شامل نام او و پاراگراف زندگی نامه می شود قرار دارد.
|
1 2 3 4 5 6 7 8 9 |
<div id="author-info"> <div id="author-image"> <a href="**Author Website**">**Author Gravatar**</a> </div> <div id="author-bio"> <h4>Written by <a href="**Author Website**">**Author Name**</a></h4> <p>**Author Description**</p> </div> </div><!--Author Info--> |
استایل با سی اس اس
حال که HTML در جای خود قرار گرفت، با سی اس اس همه چیز را آن گونه که می خواهیم تغییر می دهیم. در اینجا استایل div اصلی یعنی author-info را با بک گراند خاکستری، کمی padding و یک حاشیه از پایین داده ایم. با border- radius لبه ها را گرد کردیم و تصویر نویسنده نیز به سمت چپ منتقل شده است.
|
1 2 3 4 5 6 7 8 9 10 |
#main div#author-info { background: #eaeaec; padding: 10px; margin: 0 0 15px 0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow: auto; } #main div#author-info div#author-image { float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1; } |
اضافه نمودن تگ های قالب
|
1 2 3 4 5 6 7 8 9 |
<div id="author-info"> <div id="author-image"> <a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a> </div> <div id="author-bio"> <h4>Written by <?php the_author_link(); ?></h4> <p><?php the_author_meta('description'); ?></p> </div> </div><!--Author Info--> |
قابلیت داینامیک بودن را می توان بعدا با استفاده از تگ های قالب وردپرس به فایل پوسته اضافه نمود. در اینجا کدهایی که استفاده کردیم را شرح مختصری می دهیم :
|
1 |
<?php the_author_meta('user_url'); ?> |
تگ قالب the_author_meta() را می توان در بسیاری از کدهایی که مربوط به اطلاعات نویسنده است، به کار برد که در این حالت به این منظور به کار می رود که URL نویسنده را بیابد.
|
1 |
<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?> |
تگ قالب get_avatar() برای به دست آوردن نویسنده به کار می رود و تگget_the_author_meta(‘user_email’) نیز برای قرار دادن ایمیل نویسنده در پارامترها استفاده می شود.
|
1 |
<?php the_author_link(); ?> |
تگ the_author_link() نیز کار ساده ای انجام می دهد. نام نویسنده را به نمایش می گذارد و آن را به صورت خودکار به آدرس وبسایتی که کاربر قبلا آن را در قسمت “شناسنامه شما” لینک می کند.
|
1 |
<?php the_author_meta('description'); ?> |
در نهایت تگ the_author_meta() بار دیگر به کار گرفته می شود، اما این بار با پارامتری که اطلاعات نویسنده (یا همان اطلاعات زندگی نامه ای نویسنده) را به نمایش می گذارد.
کمی بیشتر…
از آنجایی که در وردپرس عزیز دست مان برای به کارگیری تگ های قالب باز است، به راحتی می توان چند مشخصه بیشتر به باکس “درباره نویسنده” اضافه نمود. ما فقط معرفی می کنیم؛ استفتده از آنها با خودتان!
نمایش تمام نوشته های نویسنده
|
1 |
<p>نمایش تمامی نوشته های <?php the_author_posts_link(); ?> </p> |
نمایش تعداد نوشته های نویسنده
|
1 |
<p><?php the_author(); ?> تعداد <?php the_author_posts(); ?> نوشته در سایت <?php bloginfo('name'); ?></p> دارد |
لینک به آدرس AIM نویسنده
|
1 |
آدرس AIM <p><?php the_author(); ?> <?php the_author_meta('aim'); ?></p> است |
خداوندا! وردپرس و کدهایش را از ما نگیر!
وردپرس با طعم فارسی
با سلام خدمت شما
بنده صاحب وب سایت [] هستم که یک سایت تفریحی و دانلود است ، الان نزدیک به یک سال میشه که این سایت رو راه اندازی کردم ولی متاسفانه اصلا نتونستم براش خوب وقت بذارم .
تصمیم گرفتم که سایت تفریحی و دانلود رو تعطیل کنم و بیشتر تو زمینه طراحی وب سایت فعالیت کنم به خاطر اینکه هم به این زمینه علاقه زیادی دارم و هم اینکه بهتر نتیجه میده .
از یک طرف وقت زیادی ندارم که مدیریت کامل یک سایت رو بر عهده بگیرم و از طرفی هم نه هزینه کافی رو دارم به خاطر همین تصمیم گرفتم تو سایت های آموزشی فعالیت کنم . تمایل دارم که باهاتون همکاری کنم . می تونم در قسمت مطالب آموزشی ، طراحی قالب و … فعالیت کنم .
چند تا سوال : چرا سایتتون قالب اختصاصی نداره ؟ هر کاری و هر پایگاهی برای ادامه حیات به کسب درآمد نیاز داره ، آیا واسه این کسب درآمد برنامه‌ای دارید ؟
با تشکر از شما
سلام.
دستت درست چند تا کد رو تست کردم جواب نداد باید این رو هم تست کنم.
در مورد دعات هم آمین :))
با تشکر از زحماتت
مرسی اقا من علاقه دارم به وردپرس دارم اطلاعاتمو کامل می کنم
آموزش عالی بود.
اما بدرد من که فقط خودم تو سایتم مینویسم نمیخوره 🙂
عالی بود…خسته نباشید
بهترین و مفیدترین سایت ایرانی درباره وردپرس سایت شماست
اما پیشنهاد می کنم ظاهر سایت هم حرفهای کنید چون خودتون حرفه ای هستید
من همیشه مطالبتون رو دنبال می کنیم و برات تبلیغ می کنم
به امید موفقیتت در زندگی
دادا عالییییییییییییییییییییییییییییییییییهههههههههههههه
با درود و خسته نباشید
لطفا میشه دقیق بفرمایید که کدها درون چه فایلی و کجاش باید قرار بگیرن!؟؟آخه اون کدهای html رو گفتین توی اون فایل باشه بعد اومدین گفتین که تگ های قالب رو اضافه کنین!؟
حالا اینها رو کجا باید اضافه کرد۱؟؟من درست قضیه رو نگرفتم!
سپاس از اینکه راهنمایی میکنین
سلام
یه سوال واجب
این که اسم سایتتون روی عکس درج میشه با افزونه است دیگه؟؟
اگر با افزونه است
لطفا افزونش را معرفی کنید
البته افزونه واتر مارک را باهاش کار کردم واقعا مشکل داره. گفتم این شاید یه افزونه دیگست
ممنون
نه آقا. این با فتوشاپه.
سلام خسته نباشی عزیز… کارت درست!
راستی همه کدهاتو تست کردم…. بدون استثنا هیچ کدوم کار نکردن!!!
دوست خوبم، شاید جایی از کارتون مشکل داشته. ما کدها تا تست نکنیم، در معرض استفاده قرار نمیدیم.
هر مشکلی در هر کجا دارید عنوان کنید تا در خدمت باشیم.
منم تست کردم کار ندادن متاسفانه
اگر یه افزونرو خصوصی سازی کنید و بعد منتشرش کنید بنظرتون بهتر نیست ؟
ولی بازم پیداست خیلی وقت میذارید . مرسی
سلام دوست عزیز
خسته نباشید
میخواستم بدونم باید چه تغییری در css بدم که در توضیحات وقتی “Enter (برای رفتن به خط بعدی)” استفاده کنم . در هنگام نمایش هم نوشته ها به خط بعدی بروند ؟
با تشکر
سلام
چطوری اصلاعات فیس بوک و توییتر رو به همراه ایکون اضافه کنیم؟
ممنون
کد هایی که گذاشتید توی این تاپیک توی یه کادر مشکی هستن. شما از چه افزونه ای استفاده میکنید. لطفا افزونه رو معرفی کنید تا ما هم استفاده کنیم
ایول