چگونه یک صفحه پرسش و پاسخ با HTML و جاوا اسکریپت بسازیم – پارس وردپرس

صفحه سؤالات متداول (FAQ) می تواند تجربه کاربر را بهبود بخشد. همه وب‌سایت‌ها باید یک صفحه پرسش‌های متداول داشته باشند، زیرا زمان مورد نیاز کارکنان شما برای پاسخ به سؤالات ساده را کاهش می‌دهد. این امکان را به بازدیدکنندگان می دهد تا پاسخ تمام سوالات خود را در یک مکان پیدا کنند. و یک صفحه پرسش و پاسخ می تواند منبع خوبی برای ایده های محتوا باشد.

در این آموزش “پارس وردپرس“، ما به شما نشان می دهم که چگونه یک صفحه پرسش و پاسخ ساده در HTML، CSS و جاوا اسکریپت ایجاد کنید. قبل از شروع ساختن صفحه پرسش‌های متداول، بررسی خواهیم کرد که صفحه پرسش‌های متداول چیست و چرا اهمیت دارد.

صفحه پرسش و پاسخ چیست؟

صفحه سوالات متداول یکی از مفیدترین صفحات در هر وب سایتی است. این امکان را به بازدیدکنندگان می دهد تا پاسخ تمام سوالات خود را در یک مکان پیدا کنند. آنها به بازدیدکنندگان شما این فرصت را می دهند که با پاسخ به نگرانی ها یا سؤالات رایج هر کسی درباره وب سایت شما اطلاعات بیشتری کسب کنند.

سؤالات متداول یکی از صفحاتی است که نادیده گرفته می شود، اما به سختی می توانید یک فروشگاه آنلاین محبوب یا یک وب سایت بدون آن پیدا کنید.

چرا به صفحه پرسش و پاسخ نیاز دارید؟

تجربه کاربری یک وب سایت را بهبود می بخشد.
زمان مورد نیاز کارکنان شما برای پاسخ به سوالات ساده را کاهش می دهد.
به بازدیدکنندگان این امکان را می دهد تا پاسخ تمام سوالات خود را در یک مکان بیابند.
این یک منبع عالی برای ایده های محتوا است.

پیش نیازها

در این آموزش فرض می کنیم که شما توانایی استفاده از HTML، CSS و Javascript دارا میباشید. قبل از شروع باید فایل های زیر را ایجاد کنید: فایل HTML، فایل CSS و آخرین فایل جاوا اسکریپت .

در ادامه مراحلی را که برای ساخت صفحه (سؤالات متداول) باید برداشته شودرا شرح می دهیم.

مرحله اول: ساختار اسناد HTML ما

کد HTML: در این قسمت المان های صفحه پرسش و پاسخ ایجاد و بارگذاری می شود. سپس فایل style.css و index.js را ایجاد و پیوند می دهیم. ما عناصر HTML خود را در یک بخش با نام کلاس FAQ-parswp قرار دادیم. این بخش شامل عناصر مختلفی است که به قسمت هایی تقسیم می شوند. بخش اول شامل سوال است در حالی که قسمت دوم شامل پاسخ هایی است که متعلق به همان بخش است.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه سوالات متداول</title>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <h1 class="faq-heading">سوالات متداول</h1>
        <section class="faq-parswp">
            <div class="faq-one">
                <!-- faq question -->
                <h1 class="faq-page">صفحه پرسش و پاسخ چیست؟</h1>
                <!-- faq answer -->
                <div class="faq-body">
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
                </div>
            </div>
            <hr class="hr-line">
            <div class="faq-two">
                <!-- faq question -->
                <h1 class="faq-page">چرا به یک صفحه پرسش و پاسخ نیاز دارید؟</h1>
                <!-- faq answer -->
                <div class="faq-body">
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
                </div>
            </div>
            <hr class="hr-line">
            <div class="faq-three">
                <!-- faq question -->
<h1 class="faq-page">آیا تجربه کاربری یک وب سایت را بهبود می بخشد؟</h1>
                <!-- faq answer -->
                <div class="faq-body">
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
                </div>
            </div>
        </section>
    </main>
    <script src="main.js"></script>
</body>
</html>

صفحه سوالات متداول

مرحله دوم: چیدمان و استایل خود را تعیین کنید

کد CSS: این بخش شامل موقعیت صفحه سوالات متداول ما، اندازه فونت و استایل عناصر است.

ایجاد ستون های طرح بندی،
برای اینکه مطالب ما خوانا باشد باید از فونت خوب استفاده کنیم. این لینک را برای فونت مورد استفاده در فونت گوگل استفاده کنید.
صفحه مرکزی در وسط پنجره

body{
    font-family: 'Work Sans', sans-serif;
}
.faq-heading{
    border-bottom: #777;
    padding: 20px 60px;
}
.faq-parswp{
display: flex;
justify-content: center;
flex-direction: column;
}
.hr-line{
  width: 60%;
  margin: auto;
  
}
/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
    /* background-color: #eee; */
    color: #444;
    cursor: pointer;
    padding: 30px 20px;
    width: 60%;
    border: none;
    outline: none;
    transition: 0.4s;
    margin: auto;
}
.faq-body{
    margin: auto;
    /* text-align: center; */
   width: 50%; 
   padding: auto;
   
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
    background-color: #F9F9F9;
}
/* Style the faq-page panel. Note: hidden by default */
.faq-body {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}
.faq-page:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}
.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

استایل سوالات متداول

مرحله سوم: افزودن قابلیت ها

کد جاوا اسکریپت : این بخش شامل بخشی از کد است که عملکردهای صفحه پرسش و پاسخ را کنترل می کند: مدیریت رویداد.

اکنون می‌خواهیم جاوا اسکریپت را اضافه کنیم تا صفحه پرسش‌های متداول خود را کاربردی کنیم. در حال حاضر، صفحه ما زیبا به نظر می رسد اما خوب کار نمی کند زیرا ما جاوا اسکریپت خود را قرار نداده ایم، اما می توانیم آن را بسیار بهتر کنیم.

var faq = document.getElementsByClassName("faq-page");
    var i;
    for (i = 0; i < faq.length; i++) {
        faq[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var body = this.nextElementSibling;
            if (body.style.display === "block") {
                body.style.display = "none";
            } else {
                body.style.display = "block";
            }
        });
    }

جاوا سوالات متداول

نتیجه گیری

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

لینک دانلود

سوالات متداول در مورد صفحه FAQ یا (پرسش و پاسخ)

FAQ چیست؟

FAQ یا Frequently Asked Question شامل سوالاتی است که اغلب توسط کاربران وب‌سایت پرسیده می‌شوند. بسیاری از وب‌سایت‌ها بخشی به همین اسم نیز دارند که در آن این پرسش‌ها را به همراه پاسخ‌های آن قرار می‌دهند. به طور مثال همین پرسش و پاسخی که درحال مطالعه آن هستید یک FAQ برای این مقاله است.

FAQ چه تاثیری روی سایت و سئو سایت خواهد گذاشت؟

با برآورده کردن نیازهای کاربران، تجربه کاربری را افزایش می‌دهند. چون در فهرست نتایج جست‌وجو در اولویت بالاتری قرار می‌گیرند، میزان ترافیک سایت را افزایش می‌دهند. زمان بازدید از سایت و نرخ تبدیل را بهبود می‌بخشند.

چرا faq در سئو مهم است؟

امروزه گوگل، بیشتر از هروقت دیگری، به اهداف و نیاز های کاربران خود اهمیت داده و سعی دارد تا با استفاده از الگوریتم های مختلف، پاسخ تمامی سوالات و جستجو های آنها را بدهد. از این رو، سوالات متدوال، برای گوگل اهمیت بسیاری دارد؛ چون به وسیله آن، می تواند پاسخ های دقیق تر و بهتری برای سوالات سرچ شده پیدا کند.