আপনারা যারা Generatpress Premium Theme ব্যবহার করছেন তারা খুব সহজে নিচের ছবি মত সুন্দর -স্টাইলিশ- প্রিমিয়াম একটি Author Box আজকের এই পোস্টটি থেকে তৈরি করতে পারবেন।
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 থেকে Customise অপশন নির্বাচন করুন।
👉Additional CSS এখানে নিচে থাকা CSS কোডটি কপি করে পেস্ট করুন।
উপরের দুটি প্রসেস অনুসরণ করলে খুব সহজে সুন্দর- স্টাইলিশ একটি অথর বক্স আপনার তৈরি করতে পারবেন।
PHP এবং CSS কোড
অথর বক্স কাস্টমারেশন করার জন্য নিচে আমি PHP এবং 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>
CSS কোড:-👇
/* Webinsights author box*/
.webinsights-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;
}
.webinsights-author-box .insights-avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
.webinsights-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 webinsights author box*/
মনে রাখবেন, উপরের এই নিয়মে কাজ করার পূর্বে অবশ্যই আপনার এডমিন ড্যাশবোর্ড থেকে প্রোফাইলে আপনার ইমেজ যুক্ত করে নিবেন ।
উপরের এই সম্পূর্ণ প্রসেসটি আরো ভালোভাবে জানতে নিচের ভিডিওটি অনুসরণ করুন 👇
শেষ কথা – জেনারেট প্রেস প্রিমিয়াম থিম কাস্টমাইজেশন সম্পর্কিত সব ধরনের পোস্ট পেতে আমাদের ব্লগ সাইট ভিজিট করুন।
আপনার জন্য আরো প্রয়োজনীয় পোস্ট সমূহ –
ওয়েবসাইটের জন্য Backlink Website List এবং ভিডিও টিউটোরিয়াল ফ্রি প্রফাইল ব্যাকলিংক ওয়েবসাইট লিস্ট ব্লগার ওয়েবসাইট পেজ স্পিড অপটিমাইজেশন এইচটিএমএল ফাইল ব্লগ ওয়েবসাইট তৈরি করে নিয়ে মাসে ৬০-৭০ হাজার টাকা আয় করুন