redux framework installation and usages

কিভাবে ওয়ার্ডপ্রেসে নিজের থিমে রিডাক্স ফ্রেমওয়ার্ক যোগ করব?
https://hasin.me/2014/07/16/adding-redux-framework-in-your-wordpress-theme/


ওয়ার্ডপ্রেসের যতগুলো অ্যাডমিন প্যানেল বা অপশন ফ্রেমওয়ার্ক আছে তাদের মাঝে রিডাক্স অন্যতম। অনেকগুলো চমৎকার ফিচার, প্রচুর ফিল্ডের সমারোহ এবং সহজ ব্যবহারোপযোগিতার কারনে রিডাক্স খুব দ্রুতই ওয়ার্ডপ্রেস থিম ডেভেলপার দের দৃষ্টি আকর্ষন করতে সক্ষম হয়েছে। এছাড়াও রিডাক্সে ডেভেলপাররা ক্রমাগত এটাকে আপডেট করে চলেছেন, যার ফলে আমরা মাঝেমাঝেই পাচ্ছি নিত্য নতুন ফিচার। আজকের এই আর্টিকেলে আমি দেখাবো কিভাবে আমরা আমাদের থিমে এই রিডাক্স ফ্রেমওয়ার্ক দিয়ে তৈরী অপশন প্যানেল যোগ করব
১. এজন্য প্রথমেই https://github.com/ReduxFramework/ReduxFramework/ এখানে ডানদিকের নিচে গিয়ে “Download zip” বাটনে ক্লিক করে রিডাক্স ফ্রেমওয়ার্ক ডাউনলোড করে নিন
২. ডাউনলোড করা জিপ ফাইলটি আনজিপ/এক্সট্রাক্ট করলে redux-framework-master নামে একটা ফোল্ডার পাবেন। সেটা ওপেন করে একমাত্র ReduxCore এবং sample নামের ফোল্ডার দুটো রাখুন, আর class.redux-plugin.php, index.php, license.txt, redux-framework.phpনামের ফাইলগুলো রেখে বাকি সবকিছু ডিলেট করে দিন। ডিলেট করার পরে redux-framework-master ফোল্ডার এর কনটেন্ট হবে নিচের মত

৩. এবার আপনার থিমে libs নামে একটা ডিরেক্টরী তৈরী করে তার ভেতরে এই redux-framework-master ফোল্ডার পেস্ট করে দিন।
৪. এবার আপনার থিমের functions.php ফাইলে নিচের কোড টুকু যোগ করুন
if(!class_exists("ReduxFrameworkPlugin")){
    require_once(get_template_directory()."/libs/redux-framework-master/redux-framework.php");
    require_once(get_template_directory()."/libs/redux-framework-master/sample/sample-config.php");
}

৫. এবার আপনার থিম অ্যাক্টিভেট করে ওয়ার্ডপ্রেস এর অ্যাডমিন প্যানেলে আসলেই বামপাশে দেখবেন “Sample Options” নামে একটা মেনু চলে এসেছে, যা আসলে রিডাক্সের স্যাম্পল ফাইল টির আউটপুট।

ব্যাস, আমাদের থিমে রিডাক্স ফ্রেমওয়ার্ক যোগ করা শেষ। একদম সহজ, তাই না? এখন আপনি sample-config.php ফাইলটি স্টাডি করে দেখতে পারেন কিভাবে বিভিন্ন ধরনের ফিল্ড যোগ করা হয়েছে। লাইন নম্বর ২৩৯ থেকে এই সেকশন এবং ফিল্ড গুলোর ডেফিনিশন শুরু হয়েছে। এখন একটা বিষয় খুবই জরুরী, আর সেটা হল এই যে আমাদের থিমের ইউজার রা রিডাক্সের সাহায্যে বিভিন্ন ডেটা ইনপুট দিবে – আমরা সেগুলো থিমে ব্যবহার করব কিভাবে। এর জন্য আমাদের দেখতে হবে ১৫৩৫ নম্বর লাইনে (বর্তমান আপডেট অনুযায়ী) এই লাইনটি আছে
'opt_name'          => 'redux_demo',
এখানে আপনি আপনার পছন্দ মতো ভ্যারিয়েবলের নাম লিখতে পারবেন। যেমন আপনার থিমের নাম যদি হয় FlyHigh তাহলে আপনি লিখতে পারেন
'opt_name'          => 'flyhigh',
এটা করা হয়ে গেলে আপনার থিমের ফাইলে সবার উপরে এই লাইনটি লিখবেন
global $flyhigh;
এর পর থেকে রিডাক্সের যেকোন ফিল্ডের ডেটা আপনি অ্যাক্সেস করতে পারবেন $flyhigh[‘fieldid’] এইভাবে। ফিল্ডের আইডি কিভাবে লিখতে হয় এটা জানতে হলে আপনি স্যাম্পল কনফিগ ফাইলে অনেক উদাহরণ পাবেন, যেমন ধরুন একটা ফিল্ডের ডেফিনিশন হল
array(
    'id'        =>  'my_text_field',
    'type'      =>  'text',
    'desc'      =>  'Add some awesome text here',
    'default'   =>  'Oh WOW!',
    'title'     =>  'My Awesome Text'

),
উপরের উদাহরণে ফিল্ডের আইডি হল my_text_field। আরেকটা জিনিশ, সেটা হল যে “Sample Options” নামের মেনুর নাম পরিবর্তন করতে চাইলে নিচের লাইনটি খুঁজে বের করে আপনার পছন্দ মত মেনু নাম দিন
'menu_title'        => __('Sample Options', 'redux-framework-demo'),
এই স্যাম্পল ফাইলটি আপনার জানার সুবিধার্থে রিডাক্স টিম করে দিয়েছে। এই ফাইলে পরিবর্তন না করে বরং একই ফোল্ডারে দেখবেন barebones-config.php নামে আরেকটা ফাইল রয়েছে, যেটাতে শুধু যেটুকু দরকার সেটুকুই কোড আছে। আপনি সেই ফাইলটি আপনার থিমের কোথাও কপি করে নিয়ে আপনার থিমের জন্য নিজের মত করে অ্যাডমিন প্যানেল বানাতে পারবেন।

https://hasin.me/2014/07/16/adding-redux-framework-in-your-wordpress-theme/

// have to stay the below and others have to delete
class.redux-plugin.php
index.php
lincense.txt
redux-framework.php
ReduxCore
sample
Updating a CSS File Dynamically in Redux framework

// show style.css || file.php
// Help link: https://docs.reduxframework.com/core/advanced/updating-a-css-file-dynamically/
add_filter('redux/options/' . $opt_name . '/compiler', 'compiler_action', 10, 3);
function compiler_action($options, $css, $changed_values) {

    $css_dir = get_template_directory() . '/css/style.css';
	ob_start();
    require_once( get_template_directory().'/css/file.php' ); // you have to create file.php in css folder
    $css = ob_get_clean();

	/** Write to options.css file **/
	global $wp_filesystem;
	WP_Filesystem();
		if ($wp_filesystem->put_contents( $css_dir, $css, FS_CHMOD_FILE ) ) {
			return true;
		}

}

/*
array(
	'id'=>'body_color_bg',
    'type'=>'color',
	'compiler'=>array('body_color_bg'), OR 'body_color_bg'  // This is is id
	'title'=>'Body Background Color',
	'default'=>'#FFFFFF'

	),
*/

// Redux Dynamic css
function reDux_dynamic_CSS() {
	/* ------------------------------------------------------------------------ */
	/* Register Stylesheets */
	/* ------------------------------------------------------------------------ */
	wp_register_style('redux-style', get_template_directory_uri() . '/css/style.css', 'style');

	/* ------------------------------------------------------------------------ */
	/* Enqueue Styles */
	/* ------------------------------------------------------------------------ */
	wp_enqueue_style( 'redux-style');
}
add_action( 'wp_enqueue_scripts', 'reDux_dynamic_CSS', 1 );