Tuts+ -এ বাংলার অগ্রযাত্রায় আমার একটু ছোট্ট অবদান

সিএসএস সেন্টারিং-এর হলি গ্রেইল - Tuts+

যাঁরা ওয়েব থেকে টিউটোরিয়াল দেখে কাজ করতে শিখেছেন তাঁরা Tuts+-এর নাম জানেন না এমনটা হবার কথা না। টিউট্‌স প্লাস তাদের সুন্দর আর গোছানো সব টিউটোরিয়াল দিয়ে অনেক অজ্ঞকে এগিয়ে দিয়েছে জ্ঞান আর দক্ষতায়। তাদের এই অগ্রযাত্রাকে আরো বেগবান করতে তারা শুরু করেছিল Tuts+ Translation Project^, তাদের বিভিন্ন ইংরেজি ভাষার টিউটোরিয়াল নিবন্ধকে ইংরেজি-ভিন্ন অন্যান্য ভাষায় ভাষান্তরের। তো, সেখানে পশ্চিমা বিভিন্ন ভাষা যেমন: ফরাসি, স্প্যানীয় ইত্যাদি ভাষার দৌরাত্ম ছিল। তখনই আমি চিন্তা করলাম বাংলা ভাষার জন্য একটা জায়গা করে দিতে। কেননা বাংলা নিয়ে কাজ করছি আমি দীর্ঘদিন ধরে, বাংলা উইকিপিডিয়াতে, এছাড়া পেশাগত কাজে প্রচুর বাংলা ওয়েব পোর্টাল তৈরির অভিজ্ঞতা হয়েছে আমার, আলহ্বামদুলিল্লাহ।

তো, প্রথম ধাপ হিসেবে আমি Tuts+ Translator Newsletter সাবস্ক্রাইব করলাম, এবং কিছুদিনের মধ্যে অনুবাদের অনুরোধ এলো। আমি জানতে চাইলাম আমি কি বাংলায় অনুবাদ করতে পারি? সাথে এটাও জানালাম, বাংলায় অনুবাদের ব্যাপারে আমার উপর নির্ভর করতে পারেন তাঁরা, কারণ আমি TranslateWiki এবং MetaWikipedia-তে কাজ করা একজন অভিজ্ঞ অনুবাদক। প্রোজেক্টের হোতাদের একজন Ian Yates সন্তুষ্ট হলেন, জানালেন: Continue reading

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ২

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান - ন্যানোডিযাইন্‌স

« আগের পর্ব

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

আমরা গত পর্বে বলেছিলাম মাত্র ৬টা কমান্ড দিয়ে শিখে নিব, গিট কিভাবে ব্যবহার করতে হয়। …এখুনি হাত নোংরা করার দরকার নেই, একটু ভালো করে বুঝে নিতে হবে আগে। গিট রেপোযিটরি (কিংবা রেপোজিটোরি) কী? গিট কমিট কী (কমিটি নয় কিন্তু, কিংবা কম্মিট বলারও দরকার নেই)? স্টেজ করা কী? …বুঝে বুঝে এগোলে কনসেপ্ট পরিষ্কার হবে, নতুন কিছু গ্রহণ করাও সহজ হবে।

গিট - ফোল্ডার স্ট্রাকচার

গিট – ফোল্ডার স্ট্রাকচার

ধাপে ধাপে গিট

গিট রেপোযিটরি: ধরা যাক, আমার একটা ওয়েবসাইট বানাতে হবে, যেখানে দুটো ফাইল থাকবে: (১) index.html আর (২) style.css। ওযেবসাইটের নাম “mywebsite”। এখন কী করবো? … খুব সহজ, mywebsite নামের একটা ফোল্ডার তৈরি করে তার ভিতরে ফাইল দুটো রাখবো। তাহলে আমরা যদি বলি ঐ mywebsite ফোল্ডারটা হলো আমাদের প্রজেক্ট ফোল্ডার, ইউনিক্সের ভাষায় যাকে বলে ডিরেক্টরি, আর গিটের ভাষায় যাকে বলে রেপোযিটরি (repository)। ব্যস রেপোযিটরি বুঝে ফেললাম আমরা – রেপোযিটরি হলো আমাদের প্রজেক্টের সকল ফাইল একত্র করে রাখার একটা স্থান। তাহলে দেখা যাচ্ছে, একটা ফোল্ডার আর রেপোযিটরির মধ্যে কোনো পার্থক্য নেই। …আসলে তা কিন্তু সত্যি নয় – পার্থক্য আছে। Continue reading

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ১

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান - ন্যানোডিযাইন্‌স

গিট-এর লগোগিট (Git) হলো হাল আমলের সবচেয়ে প্রসিদ্ধ এবং জনপ্রিয় ভার্সন নিয়ন্ত্রণ সফ্‌টওয়্যার। …ভার্সন কন্ট্রোল বা ভার্সন নিয়ন্ত্রণ কী – আমরা সেটা দেখবো। আমরা যেহেতু একেবারে প্রাথমিক আলোচনা করছি, তাই অনেক বিষয়ই জানা থাকলেও একটু না একটু আলোচনা করতেই হবে, ধারণা পরিষ্কার হবে, আমরা বিষয়টা বুঝবোও সহজে। মনে রাখতে হবে, এপৃথিবীর সবকিছুর মূলে রয়েছে কিছু কনসেপ্ট বা ধারণা। ধারণাটা বুঝে ফেললে বাকি সব পানিভাত। Git নামটা বুঝার আগে আমি GitHub নামটা শুনেছিলাম, এবং এই দুটোর মধ্যে কোনো পার্থক্য করতে পারতাম না প্রথম প্রথম। আপনাদের মনেও যদি এই প্রশ্নটা থাকে, তাও আমরা পরিষ্কার করবো ইনশাল্লাহ। তবে শর্ত হলো দুটো -

  1. যদি জানতে হয়, শিখতে হয়, পুরো লেখাটা দুই পর্বেরই শেষ পর্যন্ত পড়তে হবে।
  2. আমার প্রতি বিশ্বাস রাখুন, খুব সহজে, সংক্ষেপে গিট বুঝাতে চলেছি, এবং আমার মতো মোটা মাথায় যদি ঢুকতে পারে, আপনাদের জন্য তো চিন্তারই কারণ নেই।

সংক্ষেপে বলো – সহজে বলো

গিট সম্পর্কে জানতে হলে কি আপনার এইসব ফিরিস্তি পড়তে হবে বসে বসে? …মোট্টেই না। Continue reading

বাংলায় নমুনা লেখা – বাংলা Lorem ipsum

আমার বাংলা নিয়ে প্রথম কাজ করবার সুযোগ তৈরি হয়েছিল অভ্র^ নামক এক যুগান্তকারী বাংলা সফ্‌টওয়্যারের মধ্য দিয়ে। এর পর একে একে বাংলা উইকিপিডিয়া, ওয়ার্ডপ্রেস বাংলা কোডেক্সসহ বিভিন্ন বাংলা অনলাইন পত্রিকা তৈরির কাজ করতে করতে বাংলার সাথে নিজেকে বেঁধে নিয়েছি আষ্টেপৃষ্ঠে। বিশেষ করে অনলাইন পত্রিকা তৈরি করতে ডিযাইন করার সময়, সেই ডিযাইনকে কোডে রূপান্তর করবার সময় বারবার অনুভব করেছি কিছু নমুনা লেখার। যে লেখাগুলো ফটোশপে বসিয়ে বাংলায় ডিযাইন করা যাবে, আবার সেই লেখাই অনলাইনে ব্যবহার করা যাবে। কিন্তু দুঃখজনক হলেও সত্য যে, ইংরেজিতে লাতিন Lorem Ipsum… সূচক নমুনা লেখা (dummy texts) থাকলেও বাংলা ভাষায় এরকম কোনো লেখা নেই। তাই নিজের তাগিদেই বাংলা ভাষার জন্য প্রথম নমুনা লেখা তৈরি করলাম, এ হলো বাংলা Lorem ipsum – কিন্তু তার অনুবাদ নয়। আমি একে নামকরণ করেছি: Continue reading

ওয়ার্ডপ্রেসে অ্যাডভান্সড সার্চ তৈরির উপায়

ওয়ার্ডপ্রেসে অ্যাডভান্সড সার্চ তৈরির উপায়

সময়: ১৫ মিনিট
জ্ঞানস্তর: মাধ্যমিক

ওয়ার্ডপ্রেস সার্চ বা অনুসন্ধান করার বিষয়টি ডিফল্টভাবেই থাকে, <?php get_search_form(); ?> লিখেই আমরা সার্চ ফর্মটা লোড করে নিতে পারি থিম কিংবা প্লাগইন ইন্টাফেসে। আর সার্চ করার পর ফলাফল দেখার জন্য search.php টেমপ্লেটটা সাজিয়ে নিতে হয়, তাহলেই অনুসন্ধানের ফলাফল দেখা যায়। কিন্তু ডিফল্ট সার্চ সুবিধাটি শুধুমাত্র keyword বা লেখার টুকরা নিয়ে অনুসন্ধান করে, যা সাধারণত পোস্ট, পেজ ইত্যাদিতেই সীমাবদ্ধ — কাস্টম ফিল্ড, ট্যাক্সোনমি ইত্যাদিতে অতিরিক্ত উপাদানের ভিতরকার তথ্যাদি অনুসন্ধান করার জন্য আপনাকে অ্যাডভান্সড সার্চ তৈরি করার কোনো বিকল্প নেই। এছাড়া এমন অনেক ক্ষেত্র আছে, যেখানে কয়েকটা আলাদা আলাদা উপাদানের বিভিন্ন মিশ্রণের প্রেক্ষিতে কিছু খুঁজে নেয়ার দরকার হতে পারে। যেমন: একটা অনলাইন স্টোর ওয়েবসাইট, কিংবা অনলাইনে গাড়ি বিক্রীর ওয়েবসাইট, যেখানে পণ্যের বা গাড়ির দাম, পণ্যের বা গাড়ির আকার, পণ্যের বা গাড়ির রং ইত্যাদি আলাদা আলাদা মিশ্রণে পণ্য বা গাড়ি খুঁজে নেয়ার দরকার হতে পারে — কেউ লাল রঙের গাড়ি ১টি চাইতে পারে, কেউ নীল রঙের গাড়ি ৩টি চাইতে পারে। তো এসব ক্ষেত্রে অ্যাডভান্সড সার্চ তৈরি করার দরকার পড়ে। আমরা আজকে ধারণা নিবো কিভাবে তা করা যায়:

ধাপ ১

আপনার থীমে শুরুতেই একটা HTML ফর্ম বানিয়ে নিতে হবে। যা দিয়ে আমরা ব্যবহারকারী থেকে তথ্য নিবো। অর্থাৎ ব্যবহারকারী কী কী মিলিয়ে অনুসন্ধান করতে চান, আমরা সেই তথ্যগুলো নেবার জন্য একটা ফর্ম বানাবো:

    <form method="get" id="advanced-searchform" role="search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <h3><?php _e( 'Advanced Search', 'textdomain' ); ?></h3>
        <!-- এই হিডেন ফিল্ড দিয়েই আমরা আসলে অ্যাডভান্সড সার্চ ফলাফল পাতাটি functions.php'র মাধ্যমে ডেকে আনবো -->
        <input type="hidden" name="search" value="advanced">
        <label for="name" class=""><?php _e( 'Name: ', 'textdomain' ); ?></label><br>
        <input type="text" value="" placeholder="<?php _e( 'Type the Car Name', 'textdomain' ); ?>" name="name" id="name" />
        <label for="model" class=""><?php _e( 'Select a Model: ', 'textdomain' ); ?></label><br>
        <select name="model" id="model">
            <option value=""><?php _e( 'Select one...', 'textdomain' ); ?></option>
            <option value="model1"><?php _e( 'Model 1', 'textdomain' ); ?></option>
            <option value="model2"><?php _e( 'Model 2', 'textdomain' ); ?></option>
        </select>
        <input type="submit" id="searchsubmit" value="Search" />
    </form>
    

ফর্মটি আমরা একটা নাম দিয়ে সেভ করবো, কিন্তু তা অবশ্যই searchform.php হবে না। উদাহরণস্বরূপ আমরা দিলাম advanced-searchform.php — কিন্তু বুঝতেই পারছেন অন্যান্য টেমপ্লেটের সাথে সাংঘর্ষিক নয় এরকম যেকোনো নামই হতে পারে।

ফর্মের সিনট্যাক্স কেমন, কোডেক্স-এ ডিফল্ট সার্চ ফর্ম থেকে তার একটা ধারণা নেয়া যেতেই পারে।
get_search_form() – Codex

এবারে আমাদের বানানো সার্চ ফর্মটি থীমের যেখানে দেখাতে চাচ্ছি, সেখানে নিচের কোডটি বসাতে হবে:

<?php get_template_part( 'advanced', 'searchform' ); ?>

আমরা TwentyFourteen-এর সাইডবারে কোডটা বসিয়ে পরীক্ষা করতে পারি। এরকম দেখাচ্ছে-

Advanced Search form WordPress by nanodesigns

তো আপনার সার্চ ফর্ম তৈরি। এবারে আপনার ব্যবহারকারীদের পছন্দ আপনি একটা URL-এ নিয়ে নিতে পারছেন। অথ্যাৎ যদি আপনি গাড়ির নামের জায়গায় “Ferrari” আর মডেলের জায়গায় “Model2″ বাছাই করে সাবমিট করেন, তাহলে URL-টা দাঁড়াবে এরকম:

http://example.com?search=advanced&name=Ferrari&model=model2

ধাপ ২

এবারে আপনার যা দরকার: ডাটাবেজে কুয়েরি করা এবং কাস্টম ফিল্ডে সার্চ কুয়েরি অনুযায়ী খুঁজে মিলিয়ে নেয়া। মনে রাখবেন, সার্চ কুয়েরি কিন্তু আপনার URL, যা আপনি ফর্মটা সাবমিট করার পরে পেয়েছেন। …এপর্যায়ে আপনি ওয়ার্ডপ্রেসকে বলে দিবেন যে, যখন আপনার ব্যবহারকারীরা সার্চ করবেন, তখন যেন আপনার নিজস্ব অনুসন্ধান পাতাটি খুঁজে এনে সেখানে ফলাফল দেখায়। এজন্য নিচের ফাংশনটি আপনার functions.php ফাইলে বসিয়ে নিন। এটি বসালে ফর্ম সাবমিট করার পরে ডিফল্ট সার্চ টেমপ্লেট না খুলে আপনার নিজস্ব সার্চ পাতা খুলবে।

    <?php
    function wpse_load_custom_search_template(){
        if( isset($_REQUEST['search']) == 'advanced' ) {
            require('advanced-search-result.php');
            die();
        }
    }
    add_action('init','wpse_load_custom_search_template');
    ?>
    

এই কোডটি আমি ওয়ার্ডপ্রেস স্ট্যাকএক্সচেঞ্জ থেকে নিয়েছি (দুর্ভাগ্যবশত আমি এর উৎসটা ভুলে গেছি), কিন্তু এই কোডটি ব্যবহারে মতদ্বৈততা আছে, বিশেষ করে init-তে অ্যাকশটা হুক করার বিষয়ে। কিন্তু সত্যি কথা বলতে কি তবু কোডটি কাজের (দুর্বল যুক্তি নিশ্চিত!)

ইতালির Giuseppe (G.M.) এব্যাপারে আরেকটি পথ বাৎলে দিয়েছেন^, তাও দেখা যেতে পারে।

ধাপ ৩

আরেকটি নতুন ফাইল তৈরি করুন, যাকে advanced-search-result.php নাম দিয়ে সংরক্ষণ করা যাক (কারণ functions.php-তে আমরা এই নামটিই দিয়েছিলাম)। আর তাহলেই আপনি এবার মুক্ত – অবশ্যই। কারণ কনসেপ্ট বা মূল ধারণাটা হলো:

  • URL থেকে তথ্যটা ধরুন,
  • একটা সাধারণ WP_Query() কাজে লাগান (কুয়েরি জটিল কিছু হলে $wpdb কুয়েরি ব্যবহার করুন)
  • কমান্ডগুলো কুয়েরিতে পাস করুন, আর ডাটাবেজ থেকে তথ্য বের করে নিন, এবং
  • ফলাফলটা দেখান

উদাহরণ হিসেবে দেখা যাক:

        <?php
        // URL থেকে ভ্যারিয়েবলে তথ্য নিন
        $_name = $_GET['name'] != '' ? $_GET['name'] : '';
        $_model = $_GET['model'] != '' ? $_GET['model'] : '';
        // কুয়েরি শুরু করুন
        $v_args = array(
                'post_type'     =>  'vehicle', // যদি কাস্টম পোস্টটাইপ ব্যবহার করেন
                's'             =>  $_name, // আপনার নাম ফিল্ড থেকে কীওয়ার্ড নিয়ে সবকিছুতে খুঁজে দেখবে
                'meta_query'    =>  array(
                                        array(
                                            'key'     => 'car_model', // ধরে নিচ্ছি আপনার meta_key হলো 'car_model'
                                            'value'   => $_model,
                                            'compare' => 'LIKE', // সিলেক্ট ফিল্ড থেকে নেয়া মডেলের সাথে মিল রেখে মডেল খুঁজে নিবে
                                        ),
                                    )
            );
        $vehicleSearchQuery = new WP_Query( $v_args );
        // WP এইমাত্র কী কুয়েরি চালু করেছে তা দেখতে নিচের লাইনটি খুলে নিন
        // var_dump($vehicleSearchQuery->request);
        // ফলাফল দেখান
        if( $vehicleSearchQuery->have_posts() ) :
            while( $vehicleSearchQuery->have_posts() ) : $vehicleSearchQuery->the_post();
                the_title(); // ধরে নিলাম আপনার গাড়ির নামগুলো CPT'র পোস্ট টাইটেল হিসেবে সংরক্ষণ করছেন
            endwhile;
        else :
            _e( 'Sorry, nothing matched your search criteria', 'textdomain' );
        endif;
        wp_reset_postdata();
        ?>
    
WP_Query() ব্যবহার করার সময় আপনার সেরা বন্ধু হতে পারে কোডেক্স পাতাটি, এবং কাস্টম ফিল্ড সংক্রান্ত প্যারামিটারগুলো:

তো আপনার পুরো জিনিসটা তৈরি এখন। কিন্তু তবু এখনও আপনার জন্য অনেক চ্যালেঞ্জ বাকি রয়ে গেলে:

  • বদলি অনুসন্ধান তথ্য: অ্যাডভান্সড সার্চ যেমন সবগুলো ফিল্ড মিলিয়ে হতে পারে, তেমনি যেকোনো একটি ফিল্ড দিয়েও হতে পারে, তাই আপনাকে নিশ্চিত হতে হবে যে, আপনার কুয়েরি সব ধরণের অবস্থায়ই ডাটাবেজে থাকা তথ্য ঠিক ঠিক বের করে আনছে।
  • শুদ্ধিকরণ আর যাচাইকরণ: টেক্সট ফিল্ড আর টেক্সটএরিয়াগুলো খুবই মারাত্মক, কারণ এগুলো দিয়ে খুব সহজেই ডাটাবেজে অযাচিত তথ্য পাঠিয়ে ওয়েবসাইটের বারোটা বাজিয়ে দেয়া যেতে পারে। তাই বলে অন্যান্য ফর্ম এলিমেন্টও কম ঝুঁকির না। তাই সরাসরি তথ্য পাঠিয়ে দেয়াটা সবসময়ই অনিরাপদ, আপনাকে অবশ্যই আগে তথ্যকে পরিশুদ্ধ করে নিয়ে যথাযথ যাচাই-বাছাইয়ের মধ্য দিয়ে তথ্যকে ডাটাবেজ কুয়েরিতে পাঠাতে হবে – যাকে বলে Sanitization & Validation। (Data Sanitization and Validation with WordPress – TutsPlus^)
  • নকশায়ন: সাজিয়ে নেয়ার বিষয়টিও আসতে পারে, কিভাবে আপনি আপনার অনুসন্ধান পাতাটি সাজাবেন, সেক্ষেত্রে আপনি page.php (কিংবা search.php) টেমপ্লেটটির সহায়তা নিতে পারেন।

তো, আপনি আসল ধারণাটি পেয়ে গেছেন, এবারে বাকি পথটা আপনাকেই চলতে হবে — পথ ধরুন, নতুন পথ আবিষ্কার করুন। মনে রাখবেন, পৃথিবীতে প্রত্যেকের পথই আলাদা। আপনারটা তৈরি করে নিন, যাতে একদিন আমি আপনাকে অনুসরণ করতে পারি। :)

-মঈনুল ইসলাম
ফ্রন্টএন্ড ডিযাইনার ও ওয়ার্ডপ্রেস ডেভলপার

ওয়ার্ডপ্রেসের wp-config.php মুছে ফেললে করণীয়

ওয়ার্ডপ্রেস wp-config.php মুছে ফেললে করণীয় - tuts nano

যারা ওয়ার্ডপ্রেস ব্যবহার করেন, তারা জানেন যে, ওয়ার্ডপ্রেসের wp-config.php ফাইলটি পুরো ওয়ার্ডপ্রেস ইন্সটলেশনের মাথাস্বরূপ। এই ফাইলে সামান্য ত্রুটির কারণে পুরো ওয়ার্ডপ্রেস ইন্সটলেশনই ভজকট পাকিয়ে যেতে পারে, এমনকি নতুন করে ওয়ার্ডপ্রেস ইন্সটল করা লাগতে পারে। সেকারণে এই ফাইলটি এডিট করতে খুব বেশি সাবধান থাকতে হয়, এবং ডেভলপারদেরকে এই ফাইলটি এডিট করার প্রয়োজনীয় নির্দেশনা দিয়ে দেয়া আছে (দেখুন: Codex: Editing wp-config.php^), যাতে তারা পারতপক্ষে ভুল না করেন। ওয়ার্ডপ্রেস ম্যানুয়ালি, মানে নিজের হাতে আপডেট করার ক্ষেত্রেও এমনভাবে নির্দেশনা দেয়া আছে (দেখুন: Codex: Updating WordPress^) যাতে, এই ফাইলটা তার মতো যথাস্থানে রেখেই আপনি নতুন ফাইল দিয়ে ওয়ার্ডপ্রেস আপডেট করে নিতে পারেন।

কিন্তু মানুষ মাত্রেই ভুল হতেই পারে। কিছু ভুল আছে, যেগুলো সংশোধনের অযোগ্য, কিন্তু আশার কথা হলো, এই ভুলটা সংশোধনযোগ্য, আর আজকে সেই কথাটিই জানাতে চাচ্ছি: ভুল করে wp-config.php ফাইলটি যদি মুছেই দিয়ে থাকেন, তাহলে দুটো উপায় অবলম্বন করতে পারেন:

  • সহজ পদ্ধতি: পুণরুদ্ধার করা
  • একটু ঝামেলার: নতুন করে সাজিয়ে নেয়া

Continue reading

ওয়ার্ডপ্রেস ফ্রন্টএন্ড ও ব্যাকএন্ডে ফেভিকন যোগ

ওয়ার্ডপ্রেস সাইটের সর্বত্র ফেভিকন যোগ - ন্যানোডিযাইন্‌স

জ্ঞানস্তর: প্রাথমিক/মাধ্যমিক স্তর

সময়: ৫ মিনিট

ফেভিকন (favicon) হলো ওয়েবসাইটের একটা সংক্ষিপ্ততম পরিচিতি বা ব্র্যান্ডিং, যা, আপনি ওয়েবসাইট খুললে ব্রাউযারের ট্যাবে কিংবা টাইটেল বারে, ওয়েবসাইটের নামের পাশে দেখা যায়। সাধারণত ওয়েবসাইটের লগো’র ছোট্ট রূপটাই ফেভিকন হিসেবে ব্যবহার করতে দেখা যায়, তবে এক্ষেত্রে ফেভিকনটা সম্পূর্ণই আপনার ব্যক্তিগত পছন্দ – যা ইচ্ছা তা হতে পারে। কোনো ওয়েবসাইটে ফেভিকন যুক্ত করার জন্য HTML <head> ট্যাগের ভিতর নিচের লাইনটি লিখতে হয়, আর যথাস্থানে .ico (Icon) এক্সটেনশানের একটা ইমেজ ফাইল রাখতে হয়:

<link rel="shortcut icon" href="images/favicon.ico" />

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

প্রথমত জেনে নেয়া দরকার, আপনি এই কাজটি থিম কিংবা প্লাগইন উভয় পদ্ধতিতেই করতে পারেন – আমরা উভয় পদ্ধতিই আলোচনা করছি:

প্রস্তুতি

যে ছবিটিকে ফেভিকন হিসেবে দেখাতে চান, তা নির্বাচন করুন, এবং যেকোনো ছবি এডিট করার টুল (যেমন: পেইন্ট, ফটোশপ, গিম্প ইত্যাদি) দিয়ে ছবিটিকে 16px × 16px কিংবা 32px × 32px-এ সংরক্ষণ করুন। ছবির ফাইলটি .jpg (JPEG), .png (PNG), .gif (GIF) ইত্যাদি যেকোনো ফর্মেটেরই হতে পারে। তবে ব্যাকগ্রাউন্ডহীন ছবি হলে .png-তে সংরক্ষণ করতে হবে।

ফাইলটিকে রিনেম করুন, এবং এক্সটেনশানটা বদলে .ico করে ফেলুন। ধরা যাক আপনার ছবিটি ছিল favicon.png, এবারে তা হয়ে গেল favicon.ico।

ব্যস, প্রস্তুতি শেষ। এবারে কাজে নামার পালা। Continue reading

পিএইচপি লুপ দিয়ে কলাম তৈরি – ২ কলাম, ৩ কলাম এবং যত ইচ্ছা

Column Design using PHP-CSS by nanodesigns

পিএইচপি (PHP)

জ্ঞানস্তর: মাধ্যমিক

লক্ষ্যণীয়: এই আলোচনায় ধরে নেয়া হয়েছে যে, পাঠকের পিএইচপি কন্ডিশনাল স্টেটমেন্ট এবং লুপ সম্পর্কে প্রাথমিক ধারণা রয়েছে।

আমি ফেসবুকে আমার অনেকগুলো ছবি একটা অ্যালবামে আপলোড করলাম, তারপর যখন অ্যালবামটা খুললাম, তখন দেখি ছবিগুলো কেমন থরে থরে সাজিয়ে রাখা হয়েছে, যেন পাশাপাশি পাঁচটা বাক্সে পাঁচটা ছবি, তারপর নিচে আবার পাঁচটা বাক্সে পাঁচটা ছবি… বেশ সুন্দর! কিংবা ধরা যাক, আমি একটা ওয়েবসাইট আছে, যেখানে আমার লেখাগুলো একটার পর একটা আসছে। এখন আমি চাচ্ছি যাতে লেখাগুলো দুই কলামে আসে – একটা লেখা বামের কলামে, তো দ্বিতীয় লেখাটা হবে ডানের কলামে, আবার তৃতীয় লেখাটা পরের লাইনে গিয়ে বসবে বামের কলামে… দারুণ হবে বিষয়টা। যারা পিএইচপি জানেন, তারা জানেন যে, এই ছবিগুলোকে একত্র করে দেখানো কিংবা লেখাগুলোকে একটার পর একটা নিয়ে এসে দেখানোর কাজটা করা হয় পিএইচপি লুপ ব্যবহার করে।

আমরা এরকম একটি অতি সাধারণ for loop নিলাম, যেখানে কিছু CSS ব্যবহার করে আমরা একটা প্রাথমিক চেহারা দাঁড় করাবো বিষয়টা বোঝার জন্য।

<?php for($counter = 0; $counter < 5; $counter++) { ?>
   <div class="content-body">
      <div class="test"></div>
      <h2>বিষয় শিরোনাম</h2>
      <p>অর্থহীন লেখা যার মাঝে আছে অনেক কিছু। হ্যাঁ, এই লেখার মাঝেই আছে অনেক কিছু। যদি তুমি মনে করো, এটা তোমার কাজে লাগবে, তাহলে তা লাগবে কাজে। নিজের ভাষায় লেখা দেখতে অভ্যস্ত হও। মনে রাখবে লেখা অর্থহীন হয়, যখন তুমি তাকে অর্থহীন মনে করো; আর লেখা অর্থবোধকতা তৈরি করে, যখন তুমি তাতে অর্থ ঢালো। যেকোনো লেখাই তোমার কাজে অর্থবোধকতা তৈরি করতে পারে, যদি তুমি সেখানে অর্থদ্যোতনা দেখতে পাও।</p>
   </div> <!-- .content-body -->
<?php } //endfor ?>

আমরা এজন্য কিছু CSS লিখলাম, যাতে বিষয়টা একটু বোধগম্য হয়, এই সিএসএস-এর সাথে কলামের এখনও কোনো সম্পর্ক নেই; আমরা আসলে, কলামটা যে ঠিকমতো কাজ করছে, সেটা যাতে বুঝতে পারি, তারই জন্য একটা প্রস্তুতি নিচ্ছি মাত্র। Continue reading

ওয়ার্ডপ্রেস থীম অপশন্‌স “এডিটর” অ্যাকাউন্ট উপযোগী করার উপায়

ওয়ার্ডপ্রেস থিম অপশন্‌স পাতায় এডিটরকে পূর্ণ প্রবেশাধিকার দিন।জ্ঞানস্তর: মাধ্যমিক/উচ্চস্তর

সময়: ৫ মিনিট

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

ওয়ার্ডপ্রেসে অ্যাডমিন প্যানেলে আলাদা পাতা বানিয়ে সেটিংস ডাটাবেযে সংরক্ষণের চিন্তা করলেই আপনাকে ওয়ার্ডপ্রেসের Settings API^‘র কথা চিন্তা করতে হবে। কারণ এই পদ্ধতিতে আপনি অনেক ঝামেলার বিষয়কে এড়িয়ে, হ্যাকিংয়ের সম্ভাবনা কমিয়ে আপনার সাইটের অ্যাডমিন প্যানেলে একটি সুরক্ষিত অ্যাডমিন সেকশন তৈরি করে নিতে পারবেন। কিন্তু সেটিংস এপিআই একটু সময় নিয়ে করতে হয়। যাহোক, সেটিংস এপিআই নিয়ে অন্য একদিন কথা বলা যাবে। এছাড়াও বিভিন্ন অপশন্‌স ফ্রেমওয়ার্ক আছে, যেগুলো অনুসরণ করে অনেক কম সময়ে অনেক ভালো অ্যাডমিন সেকশন তৈরি করে ফেলা যায়। কিন্তু এই পদ্ধতিগুলোর একটা সমস্যা আছে, সেটা হলো গতি। অ্যাডমিন ফ্রেমওয়ার্কগুলো সাইটকে অনেক ধীর করে দেয়। খুব ছোটখাটো কাজের জন্য তাই ফ্রেমওয়ার্কের বিকল্প হলো আমার গুরু Ian Stewart-এর Sample Theme Options^। মাত্র একটি ফাইল ব্যবহার করে দারুণ একটি থিম অপশন্‌স পেজ তৈরি করা যায় অনায়াসেই।

এরকমই একটি থিম অপশন্‌স পেজ তৈরি করে ফেলার পর যখন সাইটটা ক্লায়েন্টকে ডেলিভারি দেবার সময় ঘনিয়ে এলো, তখন বিভিন্নভাবে পরীক্ষা-নিরীক্ষা করতে গিয়ে দেখা গেলো, ক্লায়েন্টের জন্য তৈরি করা এডিটর ইউযার রোল হিসেবে লগইন করে ঐ থিম অপশন্‌স পেজ থেকে কোনো কিছু সংরক্ষণ করা যায় না। একটা এরর দেখায়:

Cheatin’ uh?

এররটা একটু বিতর্কিত, কারণ অনেকেই এধরণের ভুলকে ‘চিটারি’ বলে অপমান করা মনে করেন। যাহোক, সেটা আমাদের বিষয় না। …অনেক ঘাঁটাঘাঁটি করলাম। কিন্তু আশানুরূপ কোনো সমাধান পেলাম না। ঘাঁটতে ঘাঁটতে ওয়ার্ডপ্রেসের trac-এ একটি টিকেট^ পেয়ে গেলাম, সেখানে একটা আপাত-সমাধান পেলাম। Continue reading

ওয়ার্ডপ্রেস পাসওয়ার্ড বদলান এসকিউএল ম্যানেজার না থাকলেও

ওয়ার্ডপ্রেস পাসওয়ার্ড রিসেট, পিএইচপিমাইঅ্যাডমিন ছাড়াইজ্ঞানস্তর: উচ্চস্তরের টিউটোরিয়াল

সময়: ১০ মিনিট

অতি সম্প্রতি আমার একজন ক্লায়েন্ট এমন একটি সাইট নিয়ে উপস্থিত হয়েছেন, যেখানে আগের ডেভলপার তাঁকে ঠকিয়েছে। সাইটটা যে ওয়ার্ডপ্রেসে করেছে, তাও বলেনি, সাইটের অ্যাডমিন প্যানেলের পাসওয়ার্ডও দিয়ে যায়নি। ক্লায়েন্ট আমাকে কন্ট্রোল প্যানেলের পাসওয়ার্ড দিতে পারলেও সেখানে ঢুকে আমি থ’ হয়ে গেলাম: ৫ গিগাবাইট সার্ভার স্পেস থাকাসত্ত্বেয় সেখানে phpMyAdmin কিংবা SQL Manager নেই, এখন কিভাবে ওয়ার্ডপ্রেসের ব্যাকআপ নেয়া যায়? ব্যাকআপ না নিয়ে তো নতুন কাজে হাত দেয়া যায় না…

শেষ পর্যন্ত একটা উপায় খুঁজে পেলাম, যেভাবে কোনো এসকিউএল ম্যানেজার না থাকলেও ওয়ার্ডপ্রেস পাসওয়ার্ড পরিবর্তন করে অ্যাডমিন প্যানেলে ঢোকা যাবে। নিচের কোডটি দেখুন:

<?php
//Connect to mySQL First
$connection = mysql_connect('DB_HOST','DB_USER','DB_PASSWORD');
//Select Database
mysql_select_db('DB_NAME');
//Reset password with SQL UPDATE Query
$SQL="update wp_users set user_pass=MD5('newpassword123here') where user_login='admin'";
//If everything's OK, your password will be reset
if(mysql_query($SQL)){
 echo "Your password was succesfully reset!";
}

লক্ষ করুন, আমি তৃতীয় এবং ষষ্ঠ লাইনটি নির্দেশ করেছি, কারণ এটা হলো আমাদের মূল কোড, এখানে আমাদের ওয়ার্ডপ্রেসের ডাটাবেজের তথ্যাদি যুক্ত করতে হবে। যেহেতু আপনার কাছে cPanel কিংবা কন্ট্রোল প্যানেলে ঢোকার অনুমতি আছে, তাই আপনি খুব সহজেই ওয়ার্ডপ্রেসের wp-config.php ফাইলটি খুলতে পারবেন। সেখানে এই লাইনগুলো দেখতে পাবেন:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database_123');
/** MySQL database username */
define('DB_USER', 'user_123');
/** MySQL database password */
define('DB_PASSWORD', 'password_123');
/** MySQL hostname */
define('DB_HOST', '127.0.0.1');

এখানে DB_HOST-এর জায়গায় localhost-ও লেখা থাকতে পারে। যা-ই লেখা থাকুক, এখান থেকে তথ্য নিয়ে আপনি আপনার কোডে যথাস্থানে বসালে কোডটা হবে এরকম:

<?php
//Connect to mySQL First
$connection = mysql_connect('127.0.0.1','user_123','password_123');
//Select Database
mysql_select_db('database_123');
//Reset password with SQL UPDATE Query
$SQL="update wp_users set user_pass=MD5('newpassword123here') where user_login='admin'";
//If everything's OK, your password will be reset
if(mysql_query($SQL)){
 echo "Your password was succesfully reset!";
}

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

ব্যস, কাজ শেষ। এবারে ফাইলটা সংরক্ষণ করা যাক একটা নাম দিয়ে, হতে পারে reset.php। ফাইলটা এবারে ওয়ার্ডপ্রেস ইন্সটলেশনের root-এ (যেখানে wp-config.php ফাইলটা আছে, সেখানে) আপলোড করে দিন। তাই নাম নির্বাচনের সময় এমন নাম দেয়া যাবে না ফাইলটাতে, যা এখানকার কোনো ফাইলের সাথে সাংঘর্ষিক হয়। (ফাইলটা এখান থেকে^ নামিয়েও নিতে পারেন)

এবারে http://example.com/reset.php -এভাবে আপনার সাইটের URL দিয়ে ফাইলটা একবার ব্রাউয করুন। সব ঠিকঠাক হলে কিছুক্ষণের মধ্যেই ইনশাল্লাহ সুসংবাদ ভেসে উঠতে দেখবেন।

তাহলে এবারে http://example.com/wp-login.php-তে গিয়ে ইউযারনেম admin এবং পাসওয়ার্ড newpassword123here দিয়ে লগইন করুন।

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

-মঈনুল ইসলাম

wz.islam@gmail.com