آموزش ساخت باکس اطلاعات نویسنده در وردپرس
در این مقاله با نحوه ساخت باکس اطلاعات نویسنده در وردپرس را با استفاده از افزونه و بدون استفاده از افزونه آشنا خواهید شد .
باکس اطلاعات نویسنده چیست؟
یک بلوک خاص بر که داخل صفحه پست یا صفحات وب سایت تان ، جهت نمایش اطلاعات مربوط به نویسنده معمولاً بعد از محتوای پست نمایش داده میشود. به طور کلی باکس اطلاعات نویسنده برای به اشتراک گذاشتن اطلاعات مربوط به نویسنده مقاله ، بیوگرافی و لینک های شبکه های اجتماعی با خوانندگان استفاده میشود.
امروزه استفاده از باکس نویسنده بسیار رایج است . زمانی وب سایت شما چند نویسنده دارد ، جعبه نویسنده ضروری میشود . به بازدیدکنندگان کمک می‌کند که به راحتی بین پست‌های نویسندگان تمایز قائل شوند.
در این آموزش با سه روش ایجاد باکس اطلاعات نویسنده آشنا خواهید شد .
روش اول: آموزش ساخت باکس اطلاعات نویسنده در وردپرس بدون استفاده از افزونه :
از این روش بیشتر در هنگام کدنویسی و طراحی قالب وردپرس استفاده میشود. ابتدا از طریق ویرایشگر قالب وردپرس یا از طریق فایل منیجر هاست خود به پوشه قالب سایتتان بروید و کدهای زیر را در انتها یا ابتدای بخش نمایش مطلب در صفحات single.php یا author.php قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="post-author"> <div class="author-img"> <span itemscope itemprop="image" alt="Photo of <?php the_author_meta( 'display_name' ); ?>"> <?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' ); } ?> </span> </div> <div class="author-memo"> <div class="author-memo-title"> <span>نویسنده:</span> <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" > <span><?php the_author_meta( 'display_name' ); ?></span> </a> </div> <p> <?php the_author_meta('description') ?> </p> </div> </div> |
خوب ، تا اینجا باکس اطلاعات نویسنده را به قالب سایت خود اضافه کردیم و در زیر مطالب سایت نمایش داده می شود فقط الان این مشکل وجود دارد که به باکس ما استایل داده نشده است پس باید کد CSS زیر را به فایل style.css قالب خود اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .post-author{ padding: 30px 20px; } .post-author { display: flex; justify-content: space-between; } .post-author .author-img { width: 100px; height: 100px; border-radius: 100%; box-shadow: 0 0 3px #ccc; } .post-author .author-img img{ width: 100px; height: 100px; border-radius: 100%; } .post-author .author-memo{ width: calc(100% - 120px); } .post-author .author-memo p{ font-size: 14px; line-height: 25px; } |
روش دوم :آموزش ساخت باکس اطلاعات نویسنده در سایدبار ( نوار کناری پست ) :
روش برای وقتی است که بخواهید اطلاعات نویسنده در پایین پست به نمایش بگذارید. با این حال، برخی از شما ممکن است بخواهید باکس اطلاعات نویسنده را در نوار کناری یا ناحیه ابزارکها نمایش دهید.
اولین کاری که باید انجام دهید نصب و فعال کردن افزونه Meks Smart Author Widget است.
بعد از فعال‌سازی، به بخش ” نمایش – ابزارک ها ” وارد می شویم . در آنجا می‌توانید ابزارک Meks Smart Author under پیدا کنید. این ابزارک را به سایدباری که در آن می‌خواهید اطلاعات مولف را نمایش دهید ، اضافه کنید.
Author Info Box
در قسمت تنظیمات ابزارک، گزینه های متعددی وجود دارند که در ادامه به شرح هر کدام از آن ها می پردازیم:
آموزش ساخت باکس اطلاعات نویسنده در سایدبار
تنظیمات افزونه :
Title: انتخاب عنوان ابزارک
Choose author/user: انتخاب نویسنده یا کاربر مورد نظر از لیست کرکره ای
Automatically detect author: با فعال کردن این گزینه، نویسنده به صورت خودکار شناسایی می شود.
تنظیمات نمایش:
Display author avatar: نمایش آواتار نویسنده
Avatar size: انتخاب اندازه آواتار برحسب پیکسل
Display author name: نمایش نام نویسنده
Overwrite widget title with author name: با انتخاب این گزینه، نام نویسنده جایگزین عنوان ابزارک خواهد شد.
Display author description: نمایش اطلاعات نویسنده ( اطلاعاتی که در قسمت درباره من وارد کرده است)
Display author “all posts” archive link: نمایش لینک تمام نوشته های قبلی نویسنده
Link author name: با انتخاب این گزینه، نام نویسنده، دارای لینک به نوشته های قبلی نویسنده خواهد شد.
Link author avatar: با انتخاب این گزینه، آواتار نویسنده، دارای لینک به نوشته های قبلی نویسنده خواهد شد.
Link text: در صورت انتخاب گزینه ی Display author “all posts” archive link، در این قسمت می توانید متن دلخواه خود را برای لینک مورد نظر قرار دهید.
Override author link URL: اگر دوست دارید به جای لینک دادن به نوشته های قبلی نویسنده، به صفحه ی دیگری لینک بدهید می توانید نشانی URL صفحه ی موردنظر را در این قسمت وارد کنید.
خوب ، بعد از انجام تنظیمات بر روی دکمه ذخیره کلیک کنید تا تنظیمات ابزارک ذخیره شود . حالا می‌توانید از وب سایت خود دیدن کنید تا نتیجه تغییرات را ببینید.
روش سوم : آموزش ساخت باکس اطلاعات نویسنده در وردپرس با استفاده از افزونه :
افزونه‌ای که برای ساخت باکس نویسنده وردپرس قصد معرفی اونو دارم با نام Simple Author Box در مخزن وردپرس به ثبت رسیده و تاکنون موفق شده بیش از ۲۰٫۰۰۰ نصب فعال و کسب امتیاز ۴٫۴ را ازآن خودش بکنه که با استفاده از این افزونه قادر به نمایش اطلاعات نویسنده در باکس نویسنده مطالب وردپرس خواهید بود.
این افزونه با نسخه‌های جدید وردپرس بخوبی کار می‌کند. افزونه Simple Author به شما این امکان را می‌دهد که بدون هیچ تاثیر بر روی سرعت سایت باکس نویسنده را بر روی یک پست اضافه کنید.
همچنین یک جعبه نویسنده پاسخگو را ایجاد می‌کند که در تمام دستگاه‌ها عالی به نظر می‌رسد. هم چنین برای دستگاه‌های صفحه کوچک کاملا بهینه شده‌است و به شما این امکان را می‌دهد که نویسنده، نام مولف، و توضیحات آنها را اضافه کنید.
این افزونه به طور خودکار کادر نویسنده را در پایان پست اضافه می‌کند. با این حال، شما همچنین می‌توانید با استفاده از کد ساخته شده توسط افزونه ، به طور دستی کادر نویسنده را به صفحه وب سایت خود اضافه کنید. همچنین می‌توانید لینک پروفایل اجتماعی خود را به ۳۰ شبکه اجتماعی مختلف اضافه کنید.
دانلود افزونه Simple Author Box
بعد از نصب و فعال سازی افزونه مشابه تصویر زیر منویی با نام Simple Author در پیشخوان وردپرس اضافه خواهد شد. روی این منو کلیک کنید تا به صفحه تنظیمات افزونه هدایت شوید.
Simple Author Box
تنظیمات بخش settings :
Manually insert the Simple Author Box: با انتخاب این گزینه شورت کد و تابع نمایش باکس نویسنده وردپرس نمایش داده خواهد شد. این گزینه را فقط در صورتی فعال کنید که در قالب شما به صورت خودکار باکس نویسنده نمایش داده نشود. در صورتی که مشکلی در نمایش باکس داشتید باید از تابع یا شورت کد افزونه در قالب استفاده کنید.
Hide the author box if author description is empty: با فعال کردن این گزینه کاربرانی که پروفایل آنها خالی است و هنوز در باکس درباره‌ی من چیزی وارد نکرده باشند باکس نویسنده نمایش داده نمی‌شود.
Show author email: با فعال کردن این گزینه ایمیل نویسنده وردپرس نمایش داده میشود.
Open social icon links in a new tab: با فعال کردن این گزینه هنگام کلیک روی آیکون شبکه‌های اجتماعی لینک در پنجره جدید باز خواهد شد.
Hide the social icons on author box: با فعال کردن این گزینه آیکون شبکه اجتماعی نویسنده در باکس نویسنده نمایش داده نخواهد شد.
Simple Author Box
تنظیمات بخش appearance :
با استفاده از گزینه‌های Top margin of author box و Bottom margin of author box و Padding top and bottom of author box و Padding left and right of author box به ترتیب فاصله از بالا، فاصله از پایین، حاشیه راست و چپ و حاشیه بالا و پایین را برای باکس نویسنده وردپرس انتخاب کنید.
Author avatar image style: با استفاده ازا ین گزینه استایل نمایش آواتار کاربران را انتخاب کنید. استایل می‌تواند به صورت گرد یا مربعی باشد. در صورتی هم که مایل هستید در استایل گرد امکان چرخش آواتار فراهم باشد گزینه Rotate effect on author avatar hover را فعال کنید.
Show author website: با استفاده از این گزنه امکان نمایش سایت نویسنده را فراهم کنید. سپس با فعال کردن Open author website link in a new tab انتخاب کنید که لینک سایت نویسنده در تب جدید باز شود. برای نوفالو کردن لینک سایت نویسنده هم میتونید گزینه Add “nofollow” attribute on author website link را فعال کنید. سپس با استفاده از Author website position موقعیت نمایش آیکون سایت نویسنده را در چپ یا راست باکس نویسنده انتخاب کنید.
Social icons type: با استفاده از این گزینه میتونید نوع نمایش آیکون شبکه‌های اجتماعی را در حالت سیمبل یا رنگی انتخاب کنید.
Simple Author Box
تنظیمات بخش colors:
Author name color: از این گزینه برای انتخاب رنگ عنوان نویسنده استفاده کنید.
Author website link color: از این گزینه برای نمایش رنگ آیکون سایت نویسنده استفاده کنید.
Border color: از این گزینه برای رنگ حاشیه دور کادر باکس نویسنده وردپرس استفاده کنید.
Background color of social icons bar: در نهایت از این گزینه هم برای رنگ پس زمینه بخش آیکون‌های شبکه‌های اجتماعی استفاده کنید.
تنظیمات بخش Typography :
این بخش برای تایپوگرافی و انتخاب فونت برای باکس نویسنده وردپرس است. سعی کنید همه گزینه‌ها را به دلیل عدم در دسترس بودن فونت‌های گوگل و… برای زبان فارسی روی همان حالت None باقی بگذارید.
تنها بخش‌های قابل کاربرد انتخاب سایز فونت‌ها برای نام نویسنده، وبسایت نویسنده، بیوگرافی نویسنده و اندازه آیکون شبکه‌های اجتماعی است که بر حسب پیکسل مشخص هستند و میتونید انها را به دلخواه انتخاب کنید. در صورتی که قصد دارید متن بیوگرافی نویسنده هم به صورت ایتالیک نمایش داده شود کافی است گزینه Author description font style را روی حالت italic قرار دهید.
Simple Author Box
تنظیمات بخش Misc:
Load generated inline style to footer: با فعال کردن این گزینه هم میتونید کاری کنید که استایل‌های داخلی در فوتر سایت لود شوند. در این صورت سایت با سرعت بیشتری قابل نمایش خواهد بود.
سلام
ممنون از مطلب خوبتون .