چطور یک هدر حرفه ای در وردپرس بسازیم

برای ساخت هدر در وردپرس ما نیاز داریم به یک سری مفاهیم در زبان های HTML – CSS – JavaScript – Php تسلط داشته باشیم که در این مقاله من سعی دارم تمام این قوانین را براتون توضیح بدهم و کل مسیر را با هم پله به پله بریم تا در انتها یک هدر ریسپانسیو که در حالت موبایل حالت هبرگری هم داشته باشد را باهم طراحی کنیم ما را تا انتهای مقاله دنبال کنید :

اول از همه از کد های html شروع میکنیم و آنها را توضیح میدهم بعد میریم سراغ فایل های css برای استایل و جاوا اسکریپت برای دادن قابلیت های خاصی که با css امکان آنها وجود ندارد .

کد Html برای هدر سایت

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>هدر حرفه‌ای</title>
</head>
<body>

  <header class="site-header">
    
    <!-- Scroll Progress Bar -->
    <progress class="scroll-progress-bar" value="0" max="100"></progress>

    <!-- Logo -->
    <figure class="logo">
      <a href="/">
        <img src="logo.png" alt="لوگوی سایت" />
      </a>
    </figure>
    
    <!-- Navigation Menu -->
    <nav class="main-nav">
      <ul>
        <li><a href="#">خانه</a></li>
        <li><a href="#">محصولات</a></li>
        <li><a href="#">خدمات</a></li>
        <li><a href="#">تماس با ما</a></li>
      </ul>
    </nav>

    <!-- Search Box -->
    <form class="search-box" action="#" method="get">
      <input type="text" placeholder="جستجو کنید..." name="q" />
      <button type="submit">جستجو</button>
    </form>

    <!-- Login/Register -->
    <nav class="auth-links">
      <a href="#">ورود</a> /
      <a href="#">ثبت نام</a>
    </nav>

  </header>

</body>
</html>

و حالا در زیر هر بخش این کد را توضیح میدهم و اگر برای تگ خواستید بیشتر اطلاعات بدست بیارید میتونید صفحات مرتبط را مطالعه کنید :

چطور یک هدر حرفه ای در وردپرس بسازیم

کد Html برای هدر سایت

دیدگاهتان را بنویسید لغو پاسخ