ہیڈر فائل کی تیاری

Friday,25 April 2008
از :  
زمرات : ایچ ٹی ایم ایل

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<title>creating wordpress theme</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
</head>
<body>
<div id=”header”>
<div class=”logo”>This is logo of the site</div>
<div class=”navbar”>
<ul>
<li>First Page</li>
<li>2nd Page</li>
<li>3rd Page</li>
</ul>
<div class=”search”>
<form method=”get” action=”index.html”>
<input type=”text” class=”s” name=”s”/>
<input type=”submit” class=”button” value=”Go”/>
<form>
</div>
</div>
<div id=”page”>

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

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’);?>” />

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

<title>creating wordpress theme</title>
<title><?php bloginfo(‘name’); ?>|<?php wp_title(); ?></title>

ایسا کرنے کے بعد ہم بلاگ کے ڈیش بورڈ میں جو بھی نام رکھیں گے، وہ خود یہاں ظاہر ہو جائے گا ۔
اس سطر کے بعد ہمیں سٹائل شیٹ کی سطر نظر آ رہی ہے جسے ہم ذیل کی طرح بدل دیں گے ۔

<link rel=”stylesheet” href=”style.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />

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

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/style_name.css” type=”text/css” />

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

<div class=”logo”>This is logo of the site</div>
<div class=”logo”><a href=”<?php get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></div>

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

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

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

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

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

<?php include (TEMPLATEPATH . ‘/lahore.php’); ?>

اس کے بعد ہم باڈی سلیکٹر سے اوپر جہاں ہیڈ سلیکٹر ختم ہو رہا ہے، اُس کے ختم ہونے سے پہلے مندرجہ ذیل ٹیگز کا اضافہ کرنا ہے ۔

<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php wp_head(); ?>
<script language=”javascript” type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/UrduEditor.js”></script>
<script language=”JavaScript” type=”text/javascript”>
initUrduEditor();
</script>

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<title><?php bloginfo(‘name’); ?>|<?php wp_title(); ?></title>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php wp_head(); ?>
<script language=”javascript” type=”text/javascript”
src=”<?php bloginfo(‘template_directory’); ?>/js/UrduEditor.js”></script>
<script language=”JavaScript” type=”text/javascript”>
initUrduEditor();
</script>
</head>
<body>
<div id=”header”>
<div class=”logo”><a href=”<?php get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></div>
<div class=”navbar”>
<ul>
<li>FirstPage</li>
<li>2nd Page</li>
<li>3rd Page</li>
</ul>
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
</div>
<div id=”page”>

تبصرہ جات

“ہیڈر فائل کی تیاری” پر 2 تبصرے کئے گئے ہیں
  1. عثمان says:

    تجرباتی طور پر ایک تھیم ڈاؤن لوڈ کر کے یہ ٹیوٹوریل فالو کرنے کی کوشش کی ہے. لیکن یہاں پہنچ کر پھنس گیا ہوں. کچھ مطلوبہ چیزیں مجھے اپنی انڈیکس فائل میں مل ہی نہیں رہیں.
    خیر
    آپ نے اچھی محنت کرکے یہ ٹیوٹوریل ترتیب دیا ہے. شکریہ!

  2. عثمان جب یہ لکھا گیا تھا تو ورڈپریس کا ورژن 2 تھا، جبکہ اب تین ہے شائد کچھ ٹیگز ختم ہو گئے ہوں اور کچھ نئے جاری ہو گئے ہوں . ویسے بھی یہ اسباق ایک سادہ ایچ ٹی ایم ایل صحفہ کو ورڈپریس تھیم میں بدلنے کے لئے لکھے گئے تھے . اگر آپ نے بنا بنایا ورڈپریس تھیم ڈاونلوڈ کیا ہے تو یہ سب جتن کرنے کی ضرورت نہیں ہے، بلکہ اس کو صرف اردوانا پڑے گا. اور ان اسباق میں شائد پہلا سبق اسی بارے میں تھا، اور وہ کام نسبتآ آسان ہے .

تبصرہ کیجئے

اس بلاگ پر آپ کے تبصرہ کی حوصلہ افزائی کی جاتی ہے
اگر آپ اپنے تبصرہ کے ساتھ تصویر لگانا چاہتے ہیں، تو یہاں جا کر تصویر لگائیں ۔