تبصرے

Thursday,1 May 2008
از :  
زمرات : ایچ ٹی ایم ایل

اگر کوئی مجھ سے پوچھے کہ ورڈپریس تھیم ٹمپلیٹ میں کونسا ٹمپلیٹ سب سے مشکل ہے، تو میرا جواب ہو گا تبصروں کا سانچہ ۔ اسی لئے میں نے اس سانچہ کو سب سے آخر میں بنانے کا فیصلہ کیا ہے ۔ تبصروں کے سانچہ کے لئے ہم ورڈپریس کے ڈیفالٹ تھیم کا سانچہ استعمال کریں گے ۔یہاں دو باتیں کہنا چاہوں گا، جب آپ کسی بنے بنائے سانچہ کو ورڈپریس تھیم میں ڈھالنے کی کوشش کریں گے تو زیادہ تر سانچوں میں تبصروں کا سٹائل نہیں بنایا گیا ہو گا، لیکن پھر بھی بہت سے تھیم ایسے ہوتے ہیں جن میں پہلے پیراگراف کا سٹائل دوسرے پیراگراف سے مختلف ہوتا ہے۔ ایسی صورت میں آپ پہلے سٹائل کو پوسٹ کا سٹائل اور دوسرے کو تبصروں کا سٹائل بنا سکتے ہیں ۔
ایک اور صورت یہ بھی ہے کہ پوسٹ اور تبصروں کا سٹائل ایک ہی رکھا جائے، لیکن سب سے بہتر یہی ہے کہ نئے سرے سے تبصروں کا سٹائل بنا لیا جائے ۔ ورڈ پریس کے ڈیفالٹ تھیم میں تبصروں کا سانچہ مندرجہ ذیل ہے ۔

<?php if ( !empty($post->post_password) && $_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) : ?>
<p><?php _e(‘Enter your password to view comments.’); ?></p>
<?php return; endif; ?>

<h2 id=”comments”><?php comments_number(__(‘No Comments’), __(‘1 Comment’), __(‘% Comments’)); ?>
<?php if ( comments_open() ) : ?>
<a href=”#postcomment” title=”<?php _e(“Leave a comment”); ?>”>&raquo;</a>
<?php endif; ?>
</h2>

<?php if ( $comments ) : ?>
<ol id=”commentlist”>

<?php foreach ($comments as $comment) : ?>
<li id=”comment-<?php comment_ID() ?>”>
<?php comment_text() ?>
<p><cite><?php comment_type(__(‘Comment’), __(‘Trackback’), __(‘Pingback’)); ?> <?php _e(‘by’); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href=”#comment-<?php comment_ID() ?>”><?php comment_time() ?></a></cite> <?php edit_comment_link(__(“Edit This”), ‘ |’); ?></p>
</li>

<?php endforeach; ?>

</ol>

<?php else : // If there are no comments yet ?>
<p><?php _e(‘No comments yet.’); ?></p>
<?php endif; ?>

<p><?php comments_rss_link(__(‘<abbr title=”Really Simple Syndication”>RSS</abbr> feed for comments on this post.’)); ?>
<?php if ( pings_open() ) : ?>
<a href=”<?php trackback_url() ?>” rel=”trackback”><?php _e(‘TrackBack <abbr title=”Universal Resource Locator”>URL</abbr>’); ?></a>
<?php endif; ?>
</p>

<?php if ( comments_open() ) : ?>
<h2 id=”postcomment”><?php _e(‘Leave a comment’); ?></h2>

<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
<p><?php printf(__(‘You must be <a href=”%s”>logged in</a> to post a comment.’), get_option(‘siteurl’).”/wp-login.php?redirect_to=”.urlencode(get_permalink()));?></p>
<?php else : ?>

<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>

<?php if ( $user_ID ) : ?>

<p><?php printf(__(‘Logged in as %s.’), ‘<a href=”‘.get_option(‘siteurl’).’/wp-admin/profile.php”>’.$user_identity.'</a>’); ?> <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?action=logout” title=”<?php _e(‘Log out of this account’) ?>”><?php _e(‘Logout &raquo;’); ?></a></p>

<?php else : ?>

<p><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”22″ tabindex=”1″ />
<label for=”author”><small><?php _e(‘Name’); ?> <?php if ($req) _e(‘(required)’); ?></small></label></p>

<p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”22″ tabindex=”2″ />
<label for=”email”><small><?php _e(‘Mail (will not be published)’);?> <?php if ($req) _e(‘(required)’); ?></small></label></p>

<p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”22″ tabindex=”3″ />
<label for=”url”><small><?php _e(‘Website’); ?></small></label></p>

<?php endif; ?>

<!–<p><small><strong>XHTML:</strong> <?php printf(__(‘You can use these tags: %s’), allowed_tags()); ?></small></p>–>

<p><textarea name=”comment” id=”comment” cols=”100%” rows=”10″ tabindex=”4″></textarea></p>

<p><input name=”submit” type=”submit” id=”submit” tabindex=”5″ value=”<?php echo attribute_escape(__(‘Submit Comment’)); ?>” />
<input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” />
</p>
<?php do_action(‘comment_form’, $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>

<?php else : // Comments are closed ?>
<p><?php _e(‘Sorry, the comment form is closed at this time.’); ?></p>
<?php endif; ?>

اس فائل کو آپ کمنٹس پی ایچ پی میں کاپی پیسٹ کر لیں، اگر آپ اردو کے لئے تھیم بنا رہے ہیں تو یہاں کچھ حصوں کو ہمیں اردو میں ڈھالنا ہوگا ۔ مثلاً ذیل کی سطر

<h2 id=”comments”><?php comments_number(__(‘No Comments’), __(‘1 Comment’), __(‘% Comments’)); ?>

کو بدل کر

<h2 id=”comments”><?php comments_number(__(‘پہلا تبصرہ کریں’), __(‘ایک تبصرہ’), __(‘% تبصرے’)); ?>

اسی طرح جہاں جہاں ٹیگز کے علاوہ انگریزی کا استعمال ہوا اُن سب کو اردو سے بدل دیں ۔

<a href=”#postcomment” title=”<?php _e(“Leave a comment”); ?>”>&raquo;</a>

کو بدل کر

<a href=”#postcomment” title=”<?php _e(“تبصرہ کریں”); ?>”>&raquo;</a>

اسی طرح

<p><cite><?php comment_type(__(‘Comment’), __(‘Trackback’), __(‘Pingback’)); ?> <?php _e(‘by’); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href=”#comment-<?php comment_ID() ?>”><?php comment_time() ?></a></cite> <?php edit_comment_link(__(“Edit This”), ‘ |’); ?></p>

کو بدل کر

<p><cite><?php comment_type(__(‘Comment’), __(‘Trackback’), __(‘Pingback’)); ?> <?php _e(‘از’); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> مؤرخہ <a href=”#comment-<?php comment_ID() ?>”><?php comment_time() ?></a></cite> <?php edit_comment_link(__(“ترمیم کریں”), ‘ |’); ?></p>

ایسے ہی فارم میں جہاں جہاں انگریزی کا استعمال ہوا ہے اُسے اردو سے بدل سکتے ہیں، لیکن یہاں ہمارا مقصد یہ نہیں ہے بلکہ تبصروں کو سٹائل کرنا اصل مقصد ہے ۔ اوپر والے کوڈ میں مندرجہ ذیل حصہ تبصرہ دکھاتا ہے ۔

<?php if ( $comments ) : ?>
<ol id=”commentlist”>

<?php foreach ($comments as $comment) : ?>
<li id=”comment-<?php comment_ID() ?>”>
<?php comment_text() ?>
<p><cite><?php comment_type(__(‘Comment’), __(‘Trackback’), __(‘Pingback’)); ?> <?php _e(‘by’); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href=”#comment-<?php comment_ID() ?>”><?php comment_time() ?></a></cite> <?php edit_comment_link(__(“Edit This”), ‘ |’); ?></p>
</li>

<?php endforeach; ?>

</ol>

ورڈ پریس کے تھیم کو اگر آپ اردوا رہے ہیں تب بھی

<?php if ( $comments ) : ?>

سے شروع کر کے

<?php endforeach; ?>

کے درمیان تبصرہ ہوتا ہے ۔ اب ہم کمنٹس کے تمام سلیکٹرز کو دیکھیں گے جو مندرجہ ذیل ہیں ۔

commentlist
<ol>
<p>
<li>
<cite>

ان تمام سلیکٹرز کے بیچ میں تبصروں سے متعلق سارا متن موجود ہے، پورا کمنٹ کمنٹ لسٹ کے اندر سمایا ہے جو کہ ایک آرڈرڈ لسٹ ہے، اور تبصرہ کا متن لسٹ آئٹم کی صورت میں ہے ۔ اب آپ اپنے سانچہ کی سی ایس ایس فائل میں پوسٹ کا سٹائل دیکھ کر اس کے مطابق اوپر والے چاروں سلیکٹرز کا سٹائل بنا لیں، مثلاً

#commentlist{ width: 100%;}
#commentlist ol{ list-style-type: none; margin: 0; padding: 0;}
#commentlist ol li{margin: 10px; text-align: right;}
#commentlist ol li p{font-size: 0.75em;}
#commentlist ol li cite{font-weight: bold;}

اس طرح سٹائل ترتیب دینے کے بعد اُسے آپ سٹائل سی ایس ایس والی فائل میں مخفوظ کر لیں ۔
ایسا کرنے کے بعد ہمارا سانچہ مکمل ہے ۔ اگر آپ اردو کے لئے سانچہ بنا رہے ہیں تو آپ کو اس میں اردو پیڈ نصب کرنا ہوگا، جو کہ اتنا مشکل کام نہیں ہے ۔
ایسا کرنے کے لئے آپ jsنام کا ایک فولڈر سانچہ کے فولڈر کے اندر بنائیں اور اردو محفل سے اردو پیڈ کو ا س کے اندر ڈاؤن لوڈ کر لیں ۔ پھر جہاں جہاں آپ کو اردو پیڈ کا استعمال کرنا ہو، اُس ایریا کے نیچے ذیل والی سطر کا اضافہ کر لیں ۔

<script language=”JavaScript” type=”text/javascript”>
makeUrduEditor(“s”, 12);
</script>

اس کے علاوہ جس ایریا میں آپ اردو ایدیٹر کا استعمال چاہتے ہیں وہاں ایک لائن کا اضافہ کرلیں

onfocus=”setEditor(this)”

پورا سمجھنے کے لئے ہم اپنے سرچ پی ایچ پی فائل میں ایڈیٹر کا اضافہ کرتے ہیں ۔
ہماری فائل فی الحال کچھ یوں ہے ۔

<div class=”search”>
<form method=”get” action=””>
<input type=”text” name=”s” id=”s” value=”search”/>
<input type=”submit” class=”button” value=”Go” />
<form>
</div>

اردو ایڈیٹر کے بعد اس کی شکل ایسی بن جائے گی ۔

<div class=”search”>
<form method=”get” action=”<?php bloginfo(‘home’); ?>/”>
<input type=”text” name=”s” id=”s” value=”search” onfocus=”setEditor(this)” />
<script language=”JavaScript” type=”text/javascript”>
makeUrduEditor(“s”, 12);
</script>
<input type=”submit” class=”button” value=”Go” />
<form>
</div>

مبارک ہو ہمارے پاس ایک مکمل ورڈپریس تھیم اب موجود ہے ۔

تبصرہ جات

“تبصرے” پر 7 تبصرے کئے گئے ہیں
  1. جہانزیب بہت عمدہ سلسلہ شروع کیا ہے ورڈ پریس کے تھیم کو اردوانے کا طریقہ کار تفصیل سے لکھ کر.

    کیا اسے اردو ٹیک پر بھی شروع کیا جا سکتا ہے آپ کی اجازت سے.

    محب اردو ٹیک کے کرتا دھرتا کو میں یہ تمام اسباق ای میل کر چکا ہوں ۔

  2. جہانزیب اردو ٹیک کا کرتا دھرتا کون ہے مجھے بھی تو بتاؤ 🙂

  3. راہبر says:

    بہت بہت شکریہ آپ کا کہ اتنے اچھے انداز میں یہ اسباق پیش کیے. میں ایک ڈھانچہ (ٹیمپلیٹ) کو ورڈ پریس کی تھیم کے طور پر ڈھالنے میں کامیاب ہوچکا ہوں. ذرا ملاحظہ کیجئے میرا بلاگ.

  4. شکاری says:

    اسلام علیکم،
    جہانزیب اشرف آپ نے بہت اچھے طریقے سے سمجھایا ہے لیکن مجھ جیسے نئے آنے والوں کی سمجھ سے بالاتر ہے اگر اسکرین شاٹ کے ذریعے سمجھاتے تو نئے مبتدویوں کا بھی بھلا ہوجاتا. اب محب اس کو اردو ٹیک پر شروع کررہے ہیں‌ تو ان سے درخواست ہے کہ اسکرین شاٹس ضرور شامل کریں.

  5. شکاری اوپر جو کوڈ لکھے ہیں، یہی تو سکرین شاٹ ہیں،

  6. السلام علیکم
    شکریہ. آپ نے انتہائی عام فہم انداز میں یہ ٹیوٹوریلز لکھے ہیں کہ میں نے بھی، جو اس کام کو راکٹ سائنس سمجھتی تھی، ان اسباق پر عمل کر کے تھیم اردوا ہی لیا ہے. بہت شکریہ 🙂

  7. جہانزیب آپ کے بلاگ پر کمنٹ موڈریشن کا کو پیغام آتا ہے اس میں ‘آپ’ کے ‘پ’ کی جگہ ‘ک’ لکھا گیا ہے شاید.
    ‘ آک کا تبصرہ بلاگ ناظم کی منظوری کے بعد شائع کر دیا جائے گا’