Download as pdf or txt
Download as pdf or txt
You are on page 1of 4

‫ ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬:‫ ﺗﻌﺮﻳﺐ ﻣﻠﻔﺎﺕ ﻭﻭﺭﺩﺑﺮﻳﺲ‬- header.

php

header.php ‫ﻣﺜﺎﻝ ُﻣﺨﺘﻠﻖ ﻟﻤﻠﻒ‬


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?
php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css"
media="print" />
<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_head(); ?>
</head>
<body>
<div id="logo">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</div>
<div id="header">
<div id="nav">
<ul>
<li><a href="<?php echo get_option('home'); ?>"Home</a></li>
</ul>
</div>
</div>
<div id="page">
</body>
</html>

:‫ ﻛﺎﻵﺗﻲ‬head ‫ ﻭ‬html ‫ ﻭ ﻓﺘﺢ ﻭﺳﻢ‬DOCTYPE ‫ﻳﺒﺪﺃ ﺍﻟﻤﻠﻒ ﺑﺈﻋﻼﻥ ﻧﻮﻉ ﺍﻝ‬

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/


DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

‫< ﻭ‬/head> ‫< ﻭ‬/html> ‫ ﺃﻳ> > >ﻀًﺎ( ﺗ> > >ﺤﺘﺎﺝ ﻟ> > >ﻺﻏ> > >ﻼﻕ‬body ‫ )ﻭ‬head ‫ ﻭ‬html ‫ ﻻﺣ> > >ﻆ ﻓ> > >ﻘﻂ ﺃﻥ ﻭﺳ> > >ﻮﻡ‬.‫ﺃﺗ> > >ﺮﻙ ﻫ> > >ﺬﻩ ﺍﻟ> > >ﺘﻌﻠﻴﻤﺎﺕ ﻭﺷ> > >ﺄﻧ> > >ﻬﺎ‬
.</body>

:‫ﺛﻢ ﻳﻌّﺮﻑ ﺍﻟﻤﻠﻒ ﻟﻐﺔ ﺍﻟﺒﺮﻣﺠﺔ ﻭﻃﺮﻳﻘﺔ ﻋﺮﺽ ﺍﻟﺤﺮﻭﻑ‬

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

‫ﻛﻞ ﻣﺎ ﻋﻠﻴﻚ ﺍﻟﻘﻴﺎﻡ ﺑﻪ ﻫﻨﺎ ﻫﻮ ﺍﻟﺘﺄﻛﺪ ﺃﻥ‬

1
‫‪ - header.php‬ﺗﻌﺮﻳﺐ ﻣﻠﻔﺎﺕ ﻭﻭﺭﺩﺑﺮﻳﺲ‪ :‬ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬
‫‪charset=UTF-8‬‬

‫ﺃﻭ ﺇﺿﺎﻓﺔ ﺍﻟﺴﻄﺮ ﺍﻟﺴﺎﺑﻖ ﻛﻤﺎ ﻫﻮ ﺇﺫﺍ ﻟﻢ ﻳﺤﺘﻮﻱ ﻋﻠﻴﻪ ﺍﻟﻘﺎﻟﺐ‪.‬‬

‫ﻟﻨﺄﺧﺬ ﺍﻵﻥ ﺍﻟﻜﻮﺩ ﺍﻟﺘﺎﻟﻲ‪:‬‬

‫?< >? } ‪<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php‬‬
‫>‪php wp_title(); ?></title‬‬

‫ﺑﺈﺧﺘﺼﺎﺭ‪ ،‬ﻫﺬﻩ ﺃﻭﺳﻤﺔ ‪ html‬ﻟﻮﺿﻊ ﻋﻨﻮﺍﻥ ﻣﺪﻭﻧﺘﻚ ﻓﻲ ﺃﻋﻠﻰ ﺍﻟﻤﺘﺼﻔﺢ ﻛﻤﺎ ﻳﻠﻲ‪:‬‬

‫ﺍﻟﺠﺰﺀ ﺍﻷﻭﻝ ﻳﻄﻠﺐ ﻋﺮﺽ ﺇﺳﻢ ﻣﺪﻭﻧﺘﻚ‪:‬‬

‫;)'‪<?php bloginfo('name‬‬

‫ﺍﻟﺠﺰﺀ ﺍﻟﺜﺎﻧﻲ ﻣﻦ ﺍﻟﻜﻮﺩ ﻳﻘﻮﻝ ﻟﻮﻭﺭﺩﺑﺮﺱ‪:‬‬

‫>? { ) )(‪<?php if ( is_single‬‬

‫ﺇﺫﺍ ﻛﺎﻧﺖ ﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ﺻﻔﺤﺔ ﻋﺮﺽ “ﺗﺪﻭﻳﻨﺔ ﻣﻨﻔﺮﺩﺓ”‪ ،‬ﺃﻋﺮﺽ ﺍﻟﺘﺎﻟﻲ‪:‬‬

‫>? ;)(‪&raquo; Blog Archive <?php } ?> <?php wp_title‬‬

‫ﺃﻱ ﻋﻨﻮﺍﻥ ﺍﻟﻤﻮﻗﻊ ﻭﻋﻨﻮﺍﻥ ﺍﻟﺘﺪﻭﻳﻨﺔ‪.‬‬

‫ﻳﻤﻜﻨﻚ ﺗﻌﺮﻳﺐ ﻛﻠﻤﺘﻲ ‪) Blog Archive‬ﺍﻷﺭﺷﻴﻒ( ﺃﻭ ﻣﺤﻴﻬﺎ ﻭﻻﺣﻆ ﺃﻥ ﺩﺍﻟﺔ ﻋﻨﻮﺍﻥ ﺍﻟﺘﺪﻭﻳﻨﺔ ﻫﻲ‪:‬‬

‫>? ;)(‪<?php wp_title‬‬

‫ﻣ=ﻼﺣ=ﻈﺔ‪ :‬ﻳ>ﺤﺘﻮﻱ ﻫ>ﺬﺍ ﺍﻟ>ﻜﻮﺩ ﻋ>ﻠﻰ ﺩﺍﻟ>ﺔ ﺍﻷﺳ>ﻬﻢ ﺍﻟ>ﻤﺰﺩﻭﺟ>ﺔ >> )ﺍﻟ>ﺘﻲ ﻗ>ﺪ ﺗ>ﺒﺪﻭ ﻛ>ﺪﺍﻟ>ﺔ ﻣ>ﻦ ﺍﻟ>ﻤﺮﻳ>ﺦ ﻷﻭﻝ ﻭﻫ>ﻠﺔ!( ‪ .&raquo‬ﻛ>ﻤﺎ ﻗ>ﺪ ﺗﺠ>ﺪ ﻓ>ﻲ ﺑ>ﻌﺾ‬
‫ﺍﻟﻤﻠﻔﺎﺕ ﻣﻮﺍﺯﻳﺘﻬﺎ ﺍﻟﺨﺎﺻﺔ ﺑﺎﻷﺳﻬﻢ ﺍﻟﺸﻤﺎﻟﻴﺔ << ﻭﻫﻲ ﺩﺍﻟﺔ ‪.&laqou‬‬

‫ﺑﻌﺪ ﺫﻟﻚ ﺗﺠﺪ ﻓﻲ ﻣﻠﻒ ‪ header.php‬ﺃﻭﺍﻣﺮ ﺍﻟﺪﺍﻟﺔ‬

‫=‪<link rel‬‬

‫ﺍﻟﺘﻲ ﺗﺮﺑﻂ ﺍﻟﻤﻠﻒ ﺑﺎﻟﻤﻠﻔﺎﺕ ﺍﻟﻀﺮﻭﺭﻳﺔ ﺍﻷﺧﺮﻯ‪ ،‬ﻣﺜﻞ‪:‬‬

‫>‪<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /‬‬


‫"‪<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css‬‬
‫>‪media="print" /‬‬
‫"‪<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'); ?>" /‬‬

‫ﻻ ﺗ> > >ﺤﺘﺎﺝ ﺗ> > >ﻐﻴﻴﺮ ﺃﻭ ﺗ> > >ﻌﺪﻳ> > >ﻞ ﺳ> > >ﻮﻯ ﻛ> > >ﻠﻤﺔ ‪ RSS Feed‬ﻓ> > >ﻲ ﻫ> > >ﺬﺍ ﺍﻟ> > >ﻜﻮﺩ‪ .‬ﻳ> > >ﻤﻜﻨﻚ ﺃﻥ ﺗﺴ> > >ﺘﺒﺪﻟ> > >ﻬﺎ ﺏ “ﺧ> > >ﺪﻣ> > >ﺔ ﺍﻟ> > >ﺨﻼﺻ> > >ﺎﺕ” ﺃﻭ “ﺍﻟ> > >ﺨﻼﺻ> > >ﺎﺕ” ﺃﻭ‬

‫‪2‬‬
‫‪ - header.php‬ﺗﻌﺮﻳﺐ ﻣﻠﻔﺎﺕ ﻭﻭﺭﺩﺑﺮﻳﺲ‪ :‬ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬
‫“ﺍﻟﺘﻠﻘﻴﻤﺎﺕ”‪ ....‬ﺇﻟﺦ‪.‬‬

‫ﻣ=ﻼﺣ=ﻈﺔ‪ :‬ﺑ>ﻌﺾ ﺍﻟ>ﻘﻮﺍﻟ>ﺐ ﻭ ﺍﻹﺿ>ﺎﻓ>ﺎﺕ ﻗ>ﺪ ﺗ>ﺤﺘﻮﻱ ﻋ>ﻠﻰ ﻣ>ﻠﻔﺎﺕ ﺗ>ﺤﺘﺎﺝ ﺇﻟ>ﻰ ﺍﻟ>ﺮﺑ>ﻂ ﻫ>ﻨﺎ ﻣ>ﻦ ﺃﺟ>ﻞ ﺗ>ﻔﻌﻴﻠﻬﺎ‪ .‬ﻛ>ﻤﺎ ﻗ>ﺪ ﺗﺠ>ﺪ ﺃﻛ>ﻮﺍﺩ ﺭﺑ>ﻂ ﻣ>ﻠﻔﺎﺕ ﻭﻟ>ﻜﻨﻬﺎ ﻏ>ﻴﺮ‬
‫ﻣﻔّﻌﻠﺔ ﻋﻠﻴﻚ ﻣﺤﻲ ﻋﻼﻣﺎﺕ “ﺍﻟﺘﺤﻴﻴﺪ” ‪ “ /* */‬ﻋﻨﻬﺎ ‪ -‬ﻣﺜﻞ ﻣﻠﻒ ‪.ie7.css‬‬

‫ﺛﻢ ﻳﻘﻮﻡ ﺍﻟﻜﻮﺩ ﺑﻄﻠﺐ ﻛﻼﺱ ﺍﻟﻬﻴﺪﺭ‪:‬‬

‫>? ;)(‪<?php wp_head‬‬

‫ﺛﻢ ﻧﻐﻠﻖ ﺍﻟﻬﻴﺪﺭ‪.‬‬

‫ﻓ >ﻲ ﻫ >ﺬﺍ ﺍﻟ >ﻤﺜﺎﻝ‪ ،‬ﻳ >ﺤﺘﻮﻱ ﺍﻟ >ﻘﺎﻟ >ﺐ ﻋ >ﻠﻰ ﻣ >ﺎ ﻳ >ﺴﻤﻰ ﺑ >ﻌﻨﻮﺍﻥ ﻣ >ﻦ ﻧ >ﻮﻉ “ﻛ >ﻠﻴﻜﺎﺑ >ﻞ” ‪ clickable‬ﺃﻱ ﺃﻥ ﻋ >ﻨﻮﺍﻥ ﺍﻟ >ﻤﺪﻭﻧ >ﺔ ﺍﻟ >ﺮﺋﻴﺴ >ﻲ ﻫ >ﻮ ﻋ >ﺒﺎﺭﺓ ﻋ >ﻦ ﺭﺍﺑ >ﻂ‬
‫ﻟﻠﺼﻔﺤﺔ ﺍﻟﺮﺋﻴﺴﻴﺔ ﺃﻳﻀًﺎ‪ .‬ﻓﺒﻐﺾ ﺍﻟﻨﻈﺮ ﻋﻦ ﻣﻮﻗﻊ ﺍﻟﺰﺍﺋﺮ ﻳﻤﻜﻨﻪ ﺍﻟﻌﻮﺩﺓ ﻟﻠﺼﻔﺤﺔ ﺍﻟﺮﺋﻴﺴﻴﺔ ﻋﺒﺮ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﻌﻨﻮﺍﻥ‪.‬‬

‫ﻟﺼﻨﻊ ﻋﻨﻮﺍﻥ “ﻛﻠﻴﻜﺎﺑﻞ” ﻧﺴﺘﺨﺪﻡ ﺍﻟﻜﻮﺩ ﺍﻟﺘﺎﻟﻲ‪:‬‬

‫>"‪<div id="logo‬‬
‫>‪<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1‬‬
‫>‪<p><?php bloginfo('description'); ?></p‬‬
‫>‪</div‬‬

‫ﻳ>ﻌّﺮﻑ ﻫ>ﺎ ﺍﻟ>ﻜﻮﺩ ﺃﻥ ﺍﻟ>ﻘﺴﻢ >‪ <div‬ﺍﻟ>ﺨﺎﺹ ﺑ>ﺎﻟ>ﻌﻨﻮﺍﻥ ﻫ>ﻮ ﻛ>ﻼﺱ ‪ logo‬ﺣ>ﻴﺚ ﺳ>ﺘﺠﺪ ﺗ>ﺤﺖ ﻫ>ﺬﺍ ﺍﻟ>ﻜﻼﺱ ﻓ>ﻲ ﻣ>ﻠﻒ ﺍﻟ>ﺘﺼﻤﻴﻢ ‪ style.css‬ﻛ>ﻞ ﻣ>ﺎ ﻫ>ﻮ‬
‫ﻣ >ﺘﻌﻠﻖ ﺑ >ﺸﻜﻞ ﻭﺗ >ﺼﻤﻴﻢ ﻭﻟ >ﻮﻥ ﻭﺣﺠ >ﻢ ﺍﻟ >ﻌﻨﻮﺍﻥ‪ .‬ﻛ >ﻤﺎ ﻳﺴ >ﺘﺨﺪﻡ ﺍﻟ >ﻜﻮﺩ ﺩﺍﻟ >ﺔ ﺍﻟﺨ >ﻄﻮﻁ >‪ .<h1‬ﻟ >ﻠﺘﺤﻜﻢ ﺑ >ﻤﺴﺎﺭ ﺍﻟ >ﻌﺮﺽ ﻣ >ﺜ ً‬
‫ﻼ‪ ،‬ﻋ >ﻠﻴﻚ ﺗ >ﻌﺪﻳ >ﻞ ﺧ >ﺼﺎﺋ >ﺺ‬
‫ﺍﻟﻜﻼﺳﺎﺕ ﻭﺍﻟﺪّﻭﺍﻝ ﺍﻟﻤﺴﺘﺨﺪﻣﺔ )ﻓﻲ ﻣﻠﻒ ﺍﻟﺘﺼﻤﻴﻢ(‪.‬‬

‫ﺛﻢ ﻳﻄﺎﻟﺐ ﺍﻟﻜﻮﺩ ﺑﻌﺮﺽ ﻋﻨﻮﺍﻥ ﻭ ﺭﺍﺑﻂ ﻭﻭﺻﻒ ﺍﻟﻤﺪﻭﻧﺔ‪ ،‬ﻛﻤﺎ ﺷﺮﺣﺖ ﻓﻲ ﺃﻭﻝ ﺍﻟﺘﺪﻭﻳﻨﺔ‪.‬‬

‫ﻻﺣﻆ ﺃﻥ ﺑﻌﺾ ﺍﻟﻘﻮﺍﻟﺐ ﻗﺪ ﺗﺤﺘﻮﻱ ﻋﻠﻰ ﺍﻵﺗﻲ‪ ،‬ﺑﺪًﻻ ﻣﻦ ﺍﻟﻜﻮﺩ ﺍﻟﺴﺎﺑﻖ‪:‬‬

‫>"‪<div id="logo‬‬
‫>‪<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1‬‬
‫>‪<p><?php bloginfo('description'); ?></p‬‬
‫>‪</div‬‬

‫ﺑﺈﺧﺘﺼﺎﺭ‪ ،‬ﻫﺬﺍ ﻫﻮ ﺍﻟﻄﻠﺐ ﻧﻔﺴﻪ ﻭﻟﻜﻦ ﺑﻄﺮﻳﻘﺔ ﻣﺨﺘﻠﻔﺔ‪.‬‬

‫ﻻﺣﻆ ﺑﺎﻟﻄﺒﻊ ﺃﻧﻨﺎ ﻻ ﻧﺤﺘﺎﺝ ﺃﻥ ﻳﻜﻮﻥ “ﺍﻟﻮﺻﻒ” ‪ description‬ﻋﺒﺎﺭﺓ ﻋﻦ ﺭﺍﺑﻂ ﻫﻮ ﺍﻵﺧﺮ‪:‬‬

‫>‪<p><?php bloginfo('description'); ?></p‬‬

‫ﺣﻴﺚ ﺳﻴﻌﺮﺽ ﻫﺬﺍ ﺍﻟﻜﻮﺩ “ﺍﻟﻮﺻﻒ” ﺍﻟﺬﻱ ﻭﺿﻌﺘﻪ ﻟﻤﺪﻭﻧﺘﻚ ﻋﻨﺪﻣﺎ ﻗﻤﺖ ﺑﺎﻹﻋﺪﺍﺩﺍﺕ ﺍﻷﺳﺎﺳﻴﺔ ﻣﻦ ﺩﺍﺧﻞ ﻟﻮﺣﺔ ﺍﻟﺘﺤﻜﻢ ﻭﻓﻲ ﺳﻄﺮ ﺟﺪﻳﺪ >‪.<p‬‬

‫ﺃﺧﺒﺮًﺍ ﻳﻘﻮﻡ ﺍﻟﻜﻮﺩ ﻓﻲ ﻫﺬﺍ ﺍﻟﻤﺜﺎﻝ ﺑﻌﺮﺽ ﻗﺎﺋﻤﺔ ﺭﺋﻴﺴﻴﺔ "‪ "nav‬ﻭ ﻳﻀﻊ ﺭﺍﺑﻂ ﺍﻟﺼﻔﺤﺔ ﺍﻟﺮﺋﻴﺴﻴﺔ ﻓﻴﻬﺎ‪:‬‬

‫>"‪<div id="header‬‬
‫>"‪<div id="nav‬‬
‫>‪<ul‬‬
‫>‪<li><a href="<?php echo get_option('home'); ?>"Home</a></li‬‬
‫>‪</ul‬‬
‫>‪</div‬‬

‫‪3‬‬
‫‪ - header.php‬ﺗﻌﺮﻳﺐ ﻣﻠﻔﺎﺕ ﻭﻭﺭﺩﺑﺮﻳﺲ‪ :‬ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬
‫>‪</div‬‬

‫ﺇﺳﺘﺒﺪﻝ ﻛﻠﻤﺔ ‪ Home‬ﺏ “ﺍﻟﺮﺋﻴﺴﻴﺔ” ﺃﻭ ﻣﺎ ﻳﻨﺎﺳﺒﻚ‪.‬‬

‫ﻫﺬﺍ ﻛﻞ ﺷﻲﺀ‪ .‬ﻳﻤﻜﻨﻚ ﺑﺈﺳﺘﺨﺪﺍﻡ ﺍﻷﺳﺲ ﻫﺬﻩ ﺗﻌﺮﻳﺐ ﺃﻱ ﻣﻠﻒ ﻣﺸﺎﺑﻪ‪.‬‬

‫ﺑﺎﻟﺘﻮﻓﻴﻖ‪.‬‬

‫‪4‬‬

You might also like