WordPress React Development Link
ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট :
প্রথমে থিমের টেম্পলেট ফাইল গুলো তৈরি করে
সবচেয়ে দরকারি টেম্পলেট ফাইলের নাম :
১. stylesheet (style.css )
২. functions file(functions.php )
৩. comments file (comments.php )
Some template files (index, header, footer, sidebar, single and page) .php ফাইল থিমের ডিরেক্টরিতে রাখতে হবে।
১. থিমের বর্ণনা ঠিক করা : style.css ফাইল ওপেন করে মোডিফাই করতে হবে
/*
Theme Name: customtheme
Author: Vegibit
Author URI: https://vegibit.com
Version: 1.0
*/
2 হেডার ও ফুটার ফাইল আলাদা করা: header.php ও footer.php
হেডার ও ফুটার ফাইল wphead ও wpfooter ফাংশন যোগ করা যাতে functions.php ফাইল কাজ করে এবং <body তে wp body ক্লাস যোগ করা
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<h1><?php bloginfo( 'name' ); ?></h1>
<h4><?php bloginfo( 'description' ); ?></h4>
</header>
<footer class="site-footer">
<p><?php bloginfo( 'name' ) ?></p>
</footer>
<?php wp_footer() ?>
</body>
</html>
header.php নিয়ে কাজ করা :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92"
href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3"
href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
Footer.php নিয়ে কাজ করা :
<div id="footer">
<p>
Copyright 2017 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</p>
</div>
</div></body>
</html>
sidebar.php নিয়ে কাজ করা :
functions.php ফাইল থিম সাপোর্ট ফাংশন গুলো লিখতে হবে
Functions.php তে যাও এবং কিছু কনফিগারেশন অ্যাড করো
একটি ফাংশন তৈরি করে এবং তার মধ্যে কনফিগারেশন গুলো অ্যাড করো এবং ফাংশনটি add_action( 'after_setup_theme', ‘functionname);
যেমন
add_theme_support( 'automatic-feed-links' );//এই ফাংশন টা ব্যবহার করলে আরএসএস ফিড লিনক এইচটিএমএল হেডে টাইটেলটা অটো যোগ হয়ে যাবে
add_theme_support( 'title-tag' );//এই ফাংশন যোগ করলে এইচটিএমএল হেডে টাইটেলটা অটো যোগ হয়ে যাবে
add_theme_support( 'post-thumbnails' );//এই ফাংশনটি যোগ করলে পোস্ট এডিটর পোস্ট থামনীলঅপশন এনাবল হবে
add_theme_support( 'html5', array( 'comment-form', 'comment-list', 'gallery', 'caption', ) );
add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'quote', 'link', 'gallery', 'audio', ) );//এই ফাংশনটি ব্যবহার মাধ্যমে পোস্ট ভিতরে কি কি ধরনের পোস্ট সাপোর্ট করবে তা দেখাবে
function themename_custom_logo_setup() {
$defaults = array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );
//এই ফাংশনের মধ্যে কাস্টম লোগো আপলোড অপশন তৈরি হবে ফাংশনটি টেমপ্লেটে কাজ করার জন্য এই ফাংশনটি এপ্লাই করতে হবে
if ( function_exists( 'the_custom_logo' ) ) {the_custom_logo();}
আরো কয়েকটি থিম সাপোর্ট দেওয়া হল
// Load regular editor styles into the new block-based editor. add_theme_support( 'editor-styles' ); // Load default block styles. add_theme_support( 'wp-block-styles' ); // Add support for responsive embeds. add_theme_support( 'responsive-embeds' );
3. পোস্ট লুপ করা :
<?php
get_header();
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<?php the_content() ?>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?> কয়েকটি দরকারি ওয়ার্ডপ্রেস ফাংশনের নাম :
<?php echo home_url(); ?>
<?php bloginfo( ‘name’ ); ?>
<?php bloginfo( ‘description’ ); ?>
সিঙ্গেল পেজ ডেভেলপমেন্ট
<?php get_header(); ?>
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php previous_post_link('%link') ?> <?php next_post_link(' %link') ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Page.php নিয়ে কাজ করা :
যদি কোনো পেজ তৈরী করি তাহলে সেই পেজের কনটেন্ট কিভাবে শো করবে তা ডিফাইন করা :
<?php get_header(); ?>
<div id="box"
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Comments.php নিয়ে কাজ করা :
<?php
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password)
{ // and it doesn't match the cookie
?>
<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>
<?php return;
}
}
$oddcomment = 'alt';
?>
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?>
to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?>
<a href="#comment-<?php comment_ID() ?>"
title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?>
<?php comment_time() ?></a> <?php _e('Said:'); ?>
<?php edit_comment_link('Edit Comment','',''); ?>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
</div>
<?php comment_text() ?>
</li>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; ?>
</ol>
<?php else : ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>
/wp-login.php?redirect_to=<?php the_permalink(); ?>">
logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>
/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>
/wp-login.php?action=logout"
title="Log out of this account">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>"
size="40" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>"
size="40" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?>
</small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"
size="40" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> <?php _e('You can use these tags:'); ?>
<?php echo allowed_tags(); ?></small></p>-->
<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
<?php endif; ?>
ওয়ার্ডপ্রেস উইজেট যোগ করা :
প্রথমে functions.php তে নিচের ফাঙ্কশন লিখলে ওয়ার্ডপ্রেস এর ড্যাশবোর্ড এর মেনু তে widget নাম অপসন এড হবে এবং উইডগেট এর মেনু শো করবে
function wpblog_widget()
{
register_sidebar(array(
'name' => __('Primary Sidebar', 'wpb'),
'id' => 'primary_sidebar', // unique-sidebar-id
'description' => '',
'class' => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'wpblog_widget');
এবার যেখানে উইডগেট শো করতে হবে সেই টেম্পলেট ফাইল এ নিচের কোড লিখতে হবে
<?php dynamic_sidebar( 'Primary Sidebar' ); ?>
ওয়ার্ডপ্রেস এ কিভাবে মেনু যোগ করবো :
প্রথমে functions.php ফাইল এ ফাঙ্কশন লিখবো তারপর টেম্পলেট ফাইল এ তা শো করবো
ওয়ার্ডপ্রেস সাইটে মেনু কিভাবে অ্যাড করব থিমের মধ্যে মনে করো তোমার থিমে দুইটি মেনু আছে একটি উপরে মেইন মেনু এবং নিচের ফুটার মেনু তাহলে প্রথমে functions.php তে মেনু গুলো রেজিস্টার করতে হবে এভাবে
add_action('init', 'register_menu');//ওখানে প্রাইমারি মেনু নামে একটি মেনু রেজিস্টার করেছি এটাতে দুইটা প্যারামিটার আছে প্রথম প্যারামিটারে মেনু লোকেশন দ্বিতীয় প্যারামিটার ড্যাশবোর্ডে কি নামে শো করবে সেই নাম
একের অধিক মেনু রেজিস্টার করতে হলে এভাবে করতে হবে
//Registering Multiple Menus
function register_menus() {
register_nav_menus(
array(
'primary-menu' =>; __( 'Primary Menu' ),
'secondary-menu' =>; __( 'Secondary Menu' ),
'extra-menu' =>; __( 'Extra Menu' )
)
);
}
add_action( 'init', 'register_menus' );
<?php
<?php $defaults = array(
'theme_location' => ,//for menu location identifier
'menu' => ,// menu name idendifier
'container' => 'div',// before ul
'container_class' => 'menu-{menu slug}-container',//before ul class
'container_id' => ,//before ul id
'menu_class' => 'menu',// ul class
'menu_id' => ,// ul id
'echo' => true,
'fallback_cb' => ‘wpex_default_menu’,//if no menu default setযদি ডিফল্টকোন মেনু দিতে চাই সে ক্ষেত্রে যেকোনো একটি ফাংশন এর নাম
'before' => ,//before anchor text
'after' => , //after anchortext
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'link_before' => ,
'link_after' => ,
'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
'depth' => 0,
'walker' =>
);
?>
<?php wp_nav_menu( $defaults ); ?>
যদি ফলব্যাকcb ইউজ করি সে ক্ষেত্রে আমাদের এভাবে কাজ
//functions.php te
// Menu Fallback
function wpex_default_menu() {
get_template_part( 'template-parts/default-menu.php' );
}
//default-menu.php
<ul>
<li><a href="<?php echo admin_url('nav-menus.php'); ?>"><?php esc_html_e( 'Set Up Your Menu', 'text_domain' ); ?></a></li>
</ul>
?>
বুটস্ট্র্যাপ মেনু শো করানো।
প্রথমে গিটহাব হতে বুটস্টারপ navwalker ডাউনলোড করে functions.php তে অ্যাড করি এবং functions.php তে মেনু রেজিস্টার করি
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
এবার index.php বা header.php তে মেনু শো করানোর জন্য নিচের কোড অ্যাড করি
<?php
wp_nav_menu( array(
'menu' => 'primary',
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);?>
readmore অপসন নিয়ে কাজ করা প্রথমে functions.php তে ফাঙ্কশন লিখে টেম্পলেট ফাইল এ তা শো করতে হবে :
Read-more বতন উইথ লিমিট ফাংশন স্টার পিসিতে যোগ করো
add_filter("the_content", "break_text");
function limit_text($text){
if(is_front_page())
{
$length = 250;
if(strlen($text)<$length+10) return $text; //don't cut if too short
$break_pos = strpos($text, ' ', $length); //find next space after desired length
$visible = substr($text, 0, $break_pos);
return balanceTags($visible) . "... <a href='".get_permalink()."'>read more</a>";
}else{
return $text;
}
ফাঙ্কশন ব্যবহারের উদাহরণ :
<?php limit_text(25); ?>
ওয়ার্ডপ্রেস এ কাস্টম পোস্ট টাইপ :
ওয়ার্ডপ্রেস এ কাস্টম পোস্ট টাইপ : আমরা ওয়ার্ডপ্রেস এ যেমন পোস্ট মেনু হতে তৈরী করি আবার পেজ মেনু হতে পেজ তৈরী তেমনি নিজেদের মতো একটি পোস্ট টাইপ তৈরী করে যেখান হতে কোয়েরি করে ডাটা শো করা যাই। যেমন আমরা একটি স্লাইডার নাম পোস্ট টাইপ তৈরী করে সেখানে পোস্ট করে সেই পোস্ট গুলো কোয়েরি করে পেজ এ স্লাইডার শো করানোর নিয়ম এর পদ্ধতি হলো কাস্টম পোস্ট টাইপ।
নিচের কোডটি functions.php তে লিখলে ড্যাশবোর্ড এ একটি movies নাম মেনু তৈরী হবে
/*
* Creating a function to create our CPT
*/
function custom_post_type() {
// Set UI labels for Custom Post Type
$labels = array(
'name' => _x( 'Movies', 'Post Type General Name', 'twentytwenty' ),
'singular_name' => _x( 'Movie', 'Post Type Singular Name', 'twentytwenty' ),
'menu_name' => __( 'Movies', 'twentytwenty' ),
'parent_item_colon' => __( 'Parent Movie', 'twentytwenty' ),
'all_items' => __( 'All Movies', 'twentytwenty' ),
'view_item' => __( 'View Movie', 'twentytwenty' ),
'add_new_item' => __( 'Add New Movie', 'twentytwenty' ),
'add_new' => __( 'Add New', 'twentytwenty' ),
'edit_item' => __( 'Edit Movie', 'twentytwenty' ),
'update_item' => __( 'Update Movie', 'twentytwenty' ),
'search_items' => __( 'Search Movie', 'twentytwenty' ),
'not_found' => __( 'Not Found', 'twentytwenty' ),
'not_found_in_trash' => __( 'Not found in Trash', 'twentytwenty' ),
);
// Set other options for Custom Post Type
$args = array(
'label' => __( 'movies', 'twentytwenty' ),
'description' => __( 'Movie news and reviews', 'twentytwenty' ),
'labels' => $labels,
// Features this CPT supports in Post Editor
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
// You can associate this CPT with a taxonomy or custom taxonomy.
'taxonomies' => array( 'genres' ),
/* A hierarchical CPT is like Pages and can have
* Parent and child items. A non-hierarchical CPT
* is like Posts.
*/
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 5,
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'post',
'show_in_rest' => true,
);
// Registering your Custom Post Type
register_post_type( 'movies', $args );
}
/* Hook into the 'init' action so that the function
* Containing our post type registration is not
* unnecessarily executed.
*/
add_action( 'init', 'custom_post_type', 0 );
কাস্টম পোস্ট টাইপের পোস্ট কোয়েরি করে শো করানো :
<?php
$args = array( 'post_type' => 'movies', 'posts_per_page' => 10 );
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
কাস্টম পোস্ট টাইপ এর সিঙ্গেল পেজ : মনেকর তোমার পোস্টটাইপের নাম মুভিস সেক্ষেত্রে তোমার কাস্টম পোস্টটাইপের সিঙ্গেল পেজের নাম হবে movies-single.php তা নাহলে রেগুলার সিঙ্গেল পেজ এ শো করবে
ওয়ার্ডপ্রেস ও ডিফল্ট ভাবে পোস্ট থাম্বনেইল শো করানো :
অনেক সময় আমরা থিম এমন ভাবে ডিজাইন করি যাতে পোস্ট থাম্বনেইল শো করানো দরকার কিন্তু আমরা পোস্ট এ থাম্বনেইল অ্যাড করিনা সেক্ষেত্রে আমাদের থিমের মদ্ধ হতে একটি পিকচার শো করতে নিচের কোডটি functions.php তে লিখবো
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
রিডাক্স ফ্রেমওয়ার্ক দিয়ে অপসন প্যানেল যোগ করা :
প্রথমে গিটহাব হতে রিডাক্স ফাইলটি ডাউনলোড করবো তারপর থিমের মেইন ডিরেক্টরীতে ফাইলটি রেখে functions.php ফাইল এ ফাইল টি অ্যাড করবো নিচের মতো
// Redux Framework
if (!class_exists('ReduxFramework') && file_exists(plugin_dir_path(__FILE__) . '/optionpanel/redux-framework.php'))
{
require_once ('optionpanel/redux-framework.php');
}
if (!isset($redux_demo) && file_exists(plugin_dir_path(__FILE__) . '/optionpanel/sample/options.php'))
{
require_once ('optionpanel/sample/options.php');
}
এবার সেকশন ও ফিল্ড অ্যাড করবো এবং থিমের মধ্যে এভাবে বেবহার করবো
<?php
global $redux_demo;
Redux::init('redux_demo');
?>
যেখানে অপসন এর ভ্যালু আউটপুট করবো সেখানে এভাবে কোড লিখবো
<?php echo $redux_demo['opt-text']; ?>
OLEETECH 