GeneratePress Theme এ সুন্দর Author Box যুক্ত করার CSS এবং PHP কোড সহ ভিডিও টিউটোরিয়াল

আপনি যদি GeneratePress Theme ব্যবহার করে ব্লগ চালান, তাহলে প্রতিটি লেখকের পরিচয় (Author Box) না দেখানো হলে পোস্টে ভরাট মনে হতে পারে। Author Box পাঠককে লেখক সম্পর্কে দ্রুত ধারণা দেয়, বিশ্বাসযোগ্যতা বাড়ায় এবং পাঠক-লিংক/সোশ্যাল প্রোফাইলের মাধ্যমে আরও এনগেজমেন্ট এনে দেয়। নিচে আমি একটি সহজ কিন্তু প্রফেশনাল Author Box তৈরি করার সম্পূর্ণ রেসিপি দিচ্ছি — দুটো স্ক্রিপ্ট: CSS (স্টাইল) এবং PHP (আউটপুট)। আপনি চাইলে আমি ভিডিওতেও একই কাজ দেখিয়েছি — ভিডিওটি নিচে এম্বেড করা আছে, যেখানে লাইভ ডেমোসহ ধাপে ধাপে দেখানো হয়েছে।

ভিডিও টিউটোরিয়াল (Embed)

ভিডিওতে বিস্তারিত দেখানো রয়েছে — এখানে থেকে দেখতে পারেন:

Author Box তৈরি করার নিয়ম

👉প্রথমে আপনি আপনার ওয়ার্ডপ্রেস এডমিন ড্যাশবোর্ডে প্রবেশ করুন।

👉Appearance থেকে Elements এবং” Add New Element ” অপশনের উপরে ক্লিক করে নতুন একটি হুক তৈরি করতে হবে।

👉 Choose element type-Hook-Create  অপশনের উপরে ক্লিক করে দিন। আপনার সামনে নতুন একটি হুক তৈরি করা বক্স চলে আসবে।

👉Add Title কোন একটি নাম দিয়ে দিন।এবং নিচে থাকা খালি বক্সে নিচে আমি যে PHP Code দিয়েছি তা কপি করে এই বক্সে পেস্ট করুন।

👉নিচে থেকে Settings থেকে Hook- generat_after_entry_content এই অপশনটি নির্বাচন করুন।

👉নিচে থেকে Execute PHP এখানে টিক দিন।

👉Display Rules এখানে আপনাকে লোকেশন সেট করতে হবে যে আপনি এই অথর বক্সটি কোথায় শো করতে চাচ্ছেন।

Choose- post নির্বাচন করে আপডেট করে দিন।

উপরে নিয়ম অনুসরণ করে সঠিকভাবে হুক তৈরি করা হয়ে গেলে। নিচের ধাপ গুলো অনুসরণ করুন 👇

👉এডমিনে প্রবেশ করার পর মেনু থেকে Appearance থেকে Customize অপশন নির্বাচন করুন।

👉Additional CSS এখানে নিচে থাকা  CSS কোডটি কপি করে পেস্ট করুন।

উপরের দুটি প্রসেস অনুসরণ করলে খুব সহজে সুন্দর- স্টাইলিশ একটি অথর বক্স আপনার তৈরি করতে পারবেন।

PHP কোড:-👇

<div class="webinsights-author-box">

<div class="insights-avatar">

<?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>

</div>

<div class="insights-author-info">

<div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">

<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>

</div>

<div class="author-summary">

<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>

<div class="author-links">

<a href="https://webinsights.in/" title="Read more about this author">...</a>

</div>

</div>

</div>

বিঃদ্রঃ আপনি চাইলে generate_after_entry_content হুক পরিবর্তন করে অন্য কোন স্থানে (উদাহরণ: generate_before_entry_content) দেখাতে পারবেন। যদি আপনার টার্গেট থিমে হুক ভিন্ন হয়, আপনি the_content ফিল্টার ব্যবহার করেও আউটপুট করতে পারেন।

CSS কোড:-👇

/* Ssitbaritech author box*/

.ssitbaritech-author-box {

                padding: 3%;

                padding-bottom: 10px;

                margin-top: 30px;

                font-size: 0.9em;

                background-color: #fff;

                display: -webkit-box;

                display: -ms-flexbox;

                display: flex;

                -webkit-box-align: center;

                -ms-flex-align: center;

                align-items: center;

    box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;

    border-radius: 25px;
}

.ssitbaritech-author-box .insights-avatar {

                width: 250px;

                height: auto;

                border-radius: 100%;

                margin-right: 30px;

}

.ssitbaritech-author-box .insights-avatar img {

                                border-radius: 100%;

                }

.author-title {

                margin-bottom: 0.1em;

                font-weight: 600;

                font-size:18px;

}

.author-description {

                line-height: 1.6em;

                font-size:16px; 

}

.author-links a {

                margin-top: -1.5em;

                font-size: 2em;

                line-height: 2em;

                float: left;

}

@media (max-width: 768px) {

                .webinsights-author-box {

                                padding: 20px;

                                padding-bottom: 25px;

                                margin-top: 60px;

                                flex-direction: column;

                                text-align: center;

                }

                .webinsights-author-box .insights-avatar {

                                margin-right: 0;

                                width: 100%;

                                margin-top: -60px;

                }

                .webinsights-author-box .insights-avatar img {

                                max-width: 100px;

                }

                .author-links a {

                                float: none;

                                align-self: center;

                }

                .author-description {

                                margin-bottom: -0.1em;

                }

}

/*end of ssitbaritech author box*/

গুণাগুণ ও উপকারিতা

• প্রফেশনাল লুক: পোস্টে লেখকের পরিচয় স্পষ্ট হয় এবং সাইটের বিশ্বাসযোগ্যতা বাড়ে।

• ব্র্যান্ডিং: লেখকের সোশ্যাল লিংক দিলে পাঠক অন্য প্রসঙ্গেও ফিরবে।

• SEO ও E-A-T: লেখক-প্রোফাইল স্পষ্ট থাকলে Google-এর E-A-T (Expertise, Authoritativeness, Trustworthiness) সিগনাল শক্তিশালী হয়।

• Responsive ও কাস্টমাইজেবল: CSS-এর মাধ্যমে সহজে মোবাইল-ফ্রেন্ডলি করা যায়।

সতর্কতা

• কোড যোগ করার আগে সাইট ব্যাকআপ নিন।

• PHP কোড প্রয়োগের সময় কোনো সিনট্যাক্স ত্রুটি হলে সাইট ব্রেক হতে পারে — সতর্কতা অবলম্বন করুন।

• থিম আপডেটে কাস্টম কোড হারাতে না চান? তখন child theme ব্যবহার করুন বা একটি ছোট প্লাগইন বানিয়ে কোড রাখুন।

প্রশ্নোত্তর

প্রশ্ন: কোডটি GeneratePress Premium-specific কি?
উত্তর: না — কোডটি সাধারণ WordPress ফাংশন ব্যবহার করে এবং GeneratePress-এ generate_after_entry_content হুক থাকার কারণে সেখানেই সহজে কাজ করে। যদি আপনার থিমে হুক না থাকে, the_content ফিল্টার ব্যবহার করা যাবে।

প্রশ্ন: অনেক লেখক হলে কিভাবে আলাদা আলাদা Author Box দেখাব?
উত্তর: প্রতিটি পোস্টের লেখকের প্রোফাইল অনুযায়ী get_the_author_meta() ডাইনামিকালি ডেটা নিয়ে দেখায় — যার লেখক যার তার বায়ো দেখাবে।

প্রশ্ন: Author Box-এ কানেক্টেড সোশ্যাল আইকন যোগ করতে পারি?
উত্তর: অবশ্যই — শুধু PHP কোডে আরও মেটা ফিল্ড পড়িয়ে (উদাহরণ: facebook, linkedin) লিংক যোগ করুন এবং CSS-এ আইকন স্টাইল দিন।

উপসংহার

GeneratePress Premium Theme ব্যবহারকারীদের জন্য কাস্টমাইজেশন সবসময়ই একটি বিশেষ বিষয়। বিশেষ করে যারা প্রফেশনাল ব্লগ বা নিউজ ওয়েবসাইট চালান, তাদের জন্য Author Box একটি অপরিহার্য উপাদান। এই আর্টিকেলে আমরা দুটি কোড শেয়ার করেছি – একটি CSS এবং একটি PHP কোড, যার মাধ্যমে খুব সহজে আপনার ওয়েবসাইটে আকর্ষণীয় Author Box যুক্ত করা সম্ভব।

➡️ CSS কোডের মাধ্যমে আপনি আপনার Author Box–এর ডিজাইন ও স্টাইল কাস্টমাইজ করতে পারবেন।
➡️ PHP কোডের মাধ্যমে আপনি আপনার পোস্টের নিচে ডাইনামিকভাবে লেখকের তথ্য স্বয়ংক্রিয়ভাবে প্রদর্শন করতে পারবেন।

এতে আপনার ওয়েবসাইট আরও প্রফেশনাল দেখাবে, পাঠকরা সহজেই লেখক সম্পর্কে ধারণা পাবে এবং ব্র্যান্ড ভ্যালুও বাড়বে।