ওয়ার্ডপ্রেসে ডায়নামিক পেজ টেমপ্লেট, পার্ট ১

ওয়ার্ডপ্রেস পেজ টেমপ্লেট দিয়ে পেজের ডিসপ্লে লেয়াউট একেবারে চেঞ্জ করে ফেলা যায়। এটি দিয়ে সাইটে অনেক রকম ফাংশনালিটি অ্যাড করা যায়।

কিন্তু একটি সমস্যা হচ্ছে, পেজ টেমপ্লেট সাধারণত স্ট্যাটিক হয়ে থাকে। একবার পেজ বানানোর পরে পেজ বিহেভিয়ার বেশি কাস্টমাইজ করা সম্ভব হয়না। শুধু টেমপ্লেট এনেবল হবে কি না সেটা ডিসাইড করা যায়। বাই ডিফল্ট পেজ টেমপ্লেট দিয়ে একটি ফাংশন এক্সিকিউট করা হয়। যেমনঃ একটি সাইটম্যাপ ডিসপ্লে করা, ফুল উইড পেজে সাইডবার হাইড করা ইত্যাদি।

এই টিউটোরিয়ালে আমরা দেখবো কিভাবে পেজ টেমপ্লেট আরও ফ্লেক্সিবল করে তোলা যায়, কিভাবে এর ফাংশনালিটি ইম্প্রুভ করা যায়। কিভাবে একটি চাইল্ড থিমের মাধ্যমে পেজ টেমপ্লেট তৈরি করতে হয়। ফ্লেক্সিবল টেমপ্লেট বানানোর আগে আমরা একটি জেনারেল পারপাস ডায়নামিক পেজ টেমপ্লেট তৈরি করব।

এরপর আমি আপনাদের কিছু বাস্তবধর্মী কিছু সাইটে ব্যবহৃত ডায়নামিক পেজ টেমপ্লেট দেখাবো। এরপর আমরা কিছু এডভান্স টপিক দেখবো যেমন কিভাবে একটি পেজ টেমপ্লেটে কাস্টম পোষ্ট টাইপ এসাইন করতে হয়।

শুরু করি?

এই টিউটোরিয়ালের জন্য আপনার একটি অ্যাডমিন অ্যাকসেস সহ ওয়ার্ডপ্রেস ইন্সটল দরকার। লোকাল ইন্সটল হলেই হবে। এবং একটি টেক্সট এডিটর, কিন্তু এটা বাধ্যতামূলক না।

রিমোট কোন সার্ভারের ওয়ার্ডপ্রেস ইন্সটল নিয়ে কাজ করতে চাইলে, প্রথমে সেই সার্ভার থেকে FTP দিয়ে থিম ফাইল ডাউনলোড করে নিয়ে সেগুলো এডিট করে এরপর আবার রিমোট সার্ভারে আপলোড করে নিতে হবে। এই জটিলতা এড়াতে লোকাল ইন্সটল ব্যবহার করাই ভালো।

আমাদের পেজ টেমপ্লেট বানাতে, আমরা Twenty Seventeen থিমের একটি চাইল্ড থিম বানাবো, যেটা (এই টিউটোরিয়াল লেখার সময়কার লেটেস্ট থিম) ওয়ার্ডপ্রেসের লেটেস্ট থিম। তাই পরের কাজ শুরু করার আগে এই থিম ইন্সটল করে নিন।

আপনার ইচ্ছা হলে, অন্য কোন থিমেরও চাইল্ড থিম বানিয়ে নিতে পারেন। কিন্তু এই টিউটোরিয়ালের সাথে তাল মিলিয়ে কাজ করতে হলে, সেটার অনেক কোড এডিট করে নিতে হবে। থিমের বেসিক মোড অন্যান্য চাইল্ড থিমের মতই।

ওয়ার্ডপ্রেস পেজ টেমপ্লেট

পেজ টেমপ্লেট ফ্লেক্সিবল কিভাবে করতে হয়, দেখার আগে আসুন কিছু বেসিক জিনিষ দেখে নেই।

ওয়ার্ডপ্রেস টেমপ্লেট হায়রার্কি দিয়ে ডিসাইড করে, কোন পেজ কোন টেমপ্লেট দিয়ে রেন্ডার হবে। বেশির ভাগ পেজের জন্য page.php টেমপ্লেট ব্যবহৃত হয়। কিন্তু আইডি ও স্লাগের উপর ভিত্তি করে সেটা পরিবর্তন হতে পারে। তবে, কোন পেজের জন্য কোন টেমপ্লেট ব্যবহার হবে এটা হায়রার্কি তে ডিসাইড করে দিলে এরপর থেকে সব সময় সেটা অনুযায়ী টেমপ্লেট লোড হবে।

কিছু কমন ওয়ার্ডপ্রেস পেজ টেমপ্লেটের উদাহরণঃ

• কন্টাক্ট ফর্ম
• পোর্টফোলিও
• জিজ্ঞাসা
• কাস্টম 404 পেজ
• কাস্টম লগিন পেজ
• সাইটম্যাপ
• ফুল উইদ পেজ
• ব্লগ পোষ্ট পেজ
• উইজেটেড পেজ
• আরও অনেক...

আরও উদাহরণ দেয়া যায়, কিন্তু এ থেকেই যথেষ্ট বোঝা যাচ্ছে। পেজ টেমপ্লেট অনেক কাজের জিনিষ! যে কোন কিছু করার জন্যই এটি ব্যবহার করা যায়।

যারা ওয়ার্ডপ্রেস ব্যবহার করেন, তারা আসলে আরো অনেক পেজ টেমপ্লেটের উদাহরণ আগেই দেখেছেন। সকল থিমেই বিভিন্ন ফাংশনালিটি কভার করার জন্য বিভিন্ন রকমের টেমপ্লেট থাকে। আর না থাকলে চাইল্ড থিম দিয়ে নিজে তো অ্যাড করেই নেয়া যায়। একটু পরেই আমরা দেখে নিবো সেটা কিভাবে করতে হয়।

পুরো পেজের কন্ট্রোল নিয়ে নেয়া যায়, তাই পেজ টেমপ্লেট ব্যবহার করা হয়। হেডার ফুটার বাদ দিয়ে নতুন অ্যাড করে যেমন ইচ্ছা তেমন লেয়াউট ডিজাইন করা যায়। এই জন্য ফুল উইদ পেজ এত কমন, কারণ, পেজ টেমপ্লেট দিয়ে সহজেই সাইডবার রিমুভ করা যায়।

বর্তমানে উপলভ্য সকল পেজ টেমপ্লেটের লিস্ট চেক করতে ওয়ার্ডপ্রেস পেজ এডিটরে গিয়ে Template ড্রপডাউন থেকে Page Template মেটা বক্স চেক করুন। এখানে সকল উপস্থিত টেমপ্লেটের লিস্ট দেয়া আছে।

চাইল্ড থিম দিয়ে পেজ টেমপ্লেট অ্যাড করা

আগে যেমন বললাম, আমরা একটি কাস্টম চাইল্ড থিমের উপর পেজ টেমপ্লেট বানাবো।

পুরো প্রসেসটি ধাপে ধাপে কভার করা হবে, তাই চাইল্ড থিম ও পেজ টেলপ্লেট কিভাবে আনাতে হয় সেটা নিয়ে আপনার আগে থেকে জ্ঞান থাকা লাগবে না।

প্যারেন্ট থিম এডিট না করে সেটা কাস্টমাইজ করার জন্য চাইল্ড থিম ব্যবহার করা হয়।

প্যারেন্ট থিমে ডিরেক্টলি কোড এডিট করলে পরে থিম আপডেটের সময় সেগুলো রিমুভ হয়ে যায়। এই জন্য ভালো মেইনটেইনেন্সের জন্য চাইল্ড থিম ব্যবহার করতে হয়, আর এভাবেই কাস্টমাইজ করার জন্য অফিশিয়াল ডকুমেন্টেশনে লেখা আছে।

হ্যা, ওয়ার্ডপ্রেস প্লাগিন দিয়ে পেজ টেমপ্লেট অ্যাড করা যায়, কিন্তু চাইল্ড থিম দিয়ে সেটি করা আরও সহজ হয়ে যায়। সহজে করাই আমাদের লক্ষ্য, তাই আমরা এই উপায়েই আমাদের কাজ করব।

চলুন শুরু করি!

এখন আমরা ইনিশিয়াল পেজ টেমপ্লেট সেটাপ করব যেটা Twenty Seventeen চাইল্ড থিমের ফোল্ডারের ভিতরে থাকবে।

থিম ফোল্ডার ওপেন করে সেখানে চাইল্ড থিমের ফোল্ডার তৈরি করুন। প্যারেন্ট থিমের নামের শেষে '-child' লাগিয়ে ফোল্ডারের নামকরণ করুন। যেহেতু প্যারেন্ট থিমের ফোল্ডারের নাম twentyseventeen তাই আমরা চাইল্ড থিমের ফোল্ডারের নাম রাখবো twentyseventeen-child । এই ফোল্ডারের ভিতরে style.css ফাইল থাকবে।

1

/*

2

 Theme Name:   Twenty Seventeen Child

3

 Description:  Twenty Seventeen Child Theme

4

 Author:       David Gwyer

5

 Template:     twentyseventeen

6

 Version:      0.1

7

 License:      GNU General Public License v2 or later

8

 License URI:  https://www.gnu.org/licenses/gpl-2.0.html

9

 Text Domain:  twenty-seventeen-child

10

*/

এখন Twenty Seventeen থিমের সব স্টাইল চাইল্ড থিমে নিয়ে আসতে হবে। আপনি মনে হয় এতদিন @import অপশন ব্যবহার করে স্টাইল ইমপোর্ট করেছেন। ওয়ার্ডপ্রেসে এই কাজ করার জন্য আগে থেকেই একটি ফাংশন দেয়া আছে। এটা নিয়ে আনকিউ করে স্টাইল ইনপোর্ট করা যায়।

চাইল্ড থিমের ফোল্ডারে functions.php ফাইল তৈরি করুন। এরপর সেই ফাইলে একটি এম্পটি ক্লাস কন্টেইনার তৈরি করুন। এটার ভিতরে আমরা পরে আমাদের কোড লিখবো।

1

<?php

2

3

/**

4

 * Twenty Seventeen child theme class.

5

 *

6

 * DPT = D[ynamic] P[age] T[emplates].

7

 */

8

class DPT_Twenty_Seventeen_Child {

9

10

    /**

11

     * Register hooks.

12

     */

13

    public function init() {

14

        // ...

15

    }

16

}

17

18

$ts_child_theme = new DPT_Twenty_Seventeen_Child();

19

$ts_child_theme->init();

নোটঃ পিএইচপির ক্লোজিং স্টেটমেন্ট বাধ্যতামূলক নয়, তবে আপনি ইচ্ছা করলে বসাতে পারেন।

এখন প্যারেন্ট থিমের সিএসএস ফাইল আনকিউ করে চাইল্ড থিমে ইম্পোর্ট করে নিন।

1

<?php

2

3

/**

4

 * Register hooks.

5

 */

6

public function init() {

7

    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );

8

}

9

10

/* Enqueue parent theme styles. */

11

public function enqueue_parent_theme_styles() {

12

  wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );

13

}

চেঞ্জ সেভ করে চাইল্ড থিম অ্যাকটিভেট করে নিন। এরপর এটি কাজ করছে কিনা চেক করার জন্য style.css এ একটি কাস্টম সিএসএস রুল অ্যাড করে নিন।

1

* { color: red !important; }

সবকিছু ঠিক থাকলে আপনি এখন আপনার সাইটের সব লেখা লাল রঙ এ দেখতে পাবেন।

টেস্ট সিএসএস ডিলিট করে দিন, এটার আর দরকার নেই। এখন আমরা প্রথম পেজ টেমপ্লেট বানানো শুরু করব।

আমাদের প্রথম পেজ টেমপ্লেট অ্যাড করা

চাইল্ড থিমের কোথায় পেজ টেমপ্লেট ফাইলগুলো রাখা হয়, এটা আগেই বলে নেয়া দরকার। সরাসরি চাইল্ড থিমের ফোল্ডার রুটেও রাখা যায়, আবার ইচ্ছা হলে সব একটা ফোল্ডারের ভিতরেও রাখা যায়। যেখানেই রাখেন কোন সমস্যা হবে না।

অনেক বেশি টেমপ্লেট থাকলে সেগুলা একসাথে একটা ফোল্ডারে রাখা যায়, পরে খুঁজে নিতে সুবিধা হবে। ফোল্ডারের নাম যাই হোক, কোন সমস্যা নেই। সেটা চাইল্ড থিম ফোল্ডারের রুটে থাকলেই হল, ওয়ার্ডপ্রেস সেটা খুঁজে নিবে। এই টিউটোরিয়ালের জন্য আমরা page-templates নামে একটি ফোল্ডারে সব টেমপ্লেট রাখবো।

আসুন চাইল্ড থিমে একটি নতুন টেমপ্লেট অ্যাড করি। প্যারেন্ট থিমের page.php কপি করে চাইল্ড থিমে নিয়ে আসুন। ফাইলটি রিনেম করে নিন। যে কোন নাম দিতে পারেন। আমাদের টিউটোরিয়ালের সুবিধার্থে আমি এটা test-page-template.php নামে রিনেম করলাম।

page.php কপি করে রিনেম করে নেয়ার পরে, এটাকে page-templates ফোল্ডারে নিয়ে রাখি। এখন এটা দেখতে এমন দেখাবে।

test-page-template.php ফাইল ওপেন করে কমেন্ট ব্লকটি ইরেজ করে ফাইলে নিচের লাইনগুলো লিখে নিন।

1

<?php

2

3

/**

4

 * Template Name: Test Page Template

5

 *

6

 * @package WordPress

7

 * @subpackage Twenty_Seventeen

8

 * @since 1.0

9

 */

এই ধাপটি অনেক জরুরী। এটা দিয়ে ওয়ার্ডপ্রেস পেজ টেমপ্লেট সনাক্ত করে থাকে, আর এডিটর স্ক্রিনে সকল পেজ টেমপ্লেটের লিস্ট শো করে।

ফুল পেজ টেমপ্লেটের কোড এমন দেখা যাবে।

1

<?php

2

/**

3

 * Template Name: Test Page Template

4

 *

5

 * @package WordPress

6

 * @subpackage Twenty_Seventeen

7

 * @since 1.0

8

 */

9

10

get_header(); ?>

11

12

<div class="wrap">

13

    <div id="primary" class="content-area">

14

		<main id="main" class="site-main" role="main">

15

16

			<?php

17

			while ( have_posts() ) : the_post();

18

19

				get_template_part( 'template-parts/page/content', 'page' );

20

21

				// If comments are open or we have at least one comment, load up the comment template.

22

				if ( comments_open() || get_comments_number() ) :

23

					comments_template();

24

				endif;

25

26

			endwhile; // End of the loop.

27

			?>

28

29

		</main><!-- #main -->

30

	</div><!-- #primary -->

31

</div><!-- .wrap -->

32

33

<?php get_footer();

আসুন টেমপ্লেট টেস্ট করে দেখি। ওয়ার্ডপ্রেস অ্যাডমিনে গিয়ে একটি পেজ ওপেন করে নিন, যে কোন পেজ, Template ড্রপডাউন থেকে Page Attributes এসাইন করে নিন।

যেহেতু আমরা শুধু page.php ফাইলটি কপি করে নিয়েছিলাম, কাস্টম টেমপ্লেটে তেমন কোন পরিবর্তন দেখা যাবে না। কাস্টম পেজ টেমপ্লেটের while লুপ ডিলিট করে দিন, একটি কাস্টম মেসেজ অ্যাড করুন। while লুপের বদলে এই লেখা বসান।

1

<?php

2

while ( have_posts() ) : the_post();

3

    echo "<p>This is our custom page template!</p>";

4

endwhile; // End of the loop.

পেজ সেভ করে প্রিভিউ দেখুন।

নোটঃ কাস্টম মেসেজ দেখতে না পেলে সঠিক পেজ টেমপ্লেট সিলেক্ট করা আছে কিনা তা পেজ এডিটর থেকে দেখে নিন।

কাস্টম মেসেজ রিমুভ করে তার যায়গায় এই কোড বসান। তাহলে এই টেমপ্লেট একটি সাইটম্যাপ আউটপুট দিবে।

1

<?php

2

while ( have_posts() ) : the_post();

3

	echo "<h2>Sitemap</h2>";

4

	echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";

5

endwhile; // End of the loop.

এটার রেসাল্ট এমন দেখা যাবে।

সুবিধাজনক, তাই না? তবে পেজ টেমপ্লেটকে আরও অনেক উন্নত করে তোলা সম্ভব!

পরিশেষ 

আমরা স্ট্যান্ডার্ড পেজ টেমপ্লেট ব্যবহারের জন্য একটি চাইল্ড থিম বানিয়েছি। পরের টিউটোরিয়ালে আমরা দেখবো কিভাবে ধাপে ধাপে আমরা এই টেমপ্লেট এক্সটেন্ড করতে পারি।

আমরা কাস্টম কন্ট্রোল সহ একটি জেনারেল পারপাস ডায়নামিক পেজ টেমপ্লেট তৈরি করা শিখবো। পেজ টেমপ্লেটে ব্যবহৃত কন্ট্রোল লজিক বোঝার চেষ্টা করব, আর পেজ টেমপ্লেট কিভাবে ডিরেক্টলি কাস্টমাইজ করে রেন্ডার করা যায়, তা দেখবো।

ওয়ার্ডপ্রেস একটি লাভজনক সফটওয়্যার সিস্টেম। এটি সাইট বানাতে ব্যবহার হয়। এটির প্লাগিন, থিম, লাইব্রেরি ইত্যাদির প্রিমিয়াম মার্কেট আছে। এটি ওপেনসোর্স, প্রোগ্রামিং জানা থাকলে এটি দিয়ে অনেক কিছু বানিয়ে নেয়া যায়। আর জানা না থাকলেও সমস্যা নেই। এনভাটো মার্কেটপ্লেসে প্রায় সব কিছুই কিনতে পাওয়া যায়।

এটা আমার লেখা প্রথম টিউটোরিয়াল, আপনার মতামত, আর্টিকেলের নিচে অবস্থিত কমেন্ট সেকশনে মন্তব্য করে আমাদের জানাতে পারেন। আমি প্রতিটি প্রশ্নের উত্তর দেয়ার চেষ্টা করব।