Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te jQuery SSS Akordeonu Nasıl Eklenir (3 Yöntem)

İçeriği bir SSS akordeonu ile düzenlemek WordPress sitenizdeki kullanıcı deneyimini iyileştirebilir. Bu özellik, soruları ve yanıtları kompakt bir biçimde görüntülemenize olanak tanıyarak ziyaretçilerin bilgileri hızlı bir şekilde bulmasını kolaylaştırır.

Ayrıca, akordeonunuz için jQuery kullanmak SSS’lerinizi etkileşimli ve gezinmesi kolay hale getirir.

WPBeginner’da 16 yılı aşkın süredir bir blog işletiyoruz ve yüzlerce makale, rehber ve öğretici yazı yazdık. Bunlardan bazılarında, okuyucularımızdan gelen ortak soruları ele almak için jQuery SSS akordeonlarını kullandığımızı fark edeceksiniz.

Bu yaklaşım daha fazla ziyaretçi çekmemize, arama sıralamalarımızı iyileştirmemize ve hatta potansiyel müşteriler oluşturmamıza yardımcı oldu. Özetlemek gerekirse, dinamik bir SSS akordeonunun ne kadar değerli olabileceğini biliyoruz.

Bu makalede, WordPress’e nasıl kolayca bir jQuery SSS akordeonu ekleyebileceğinizi adım adım göstereceğiz.

Add a jQuery FAQ Accordion in WordPress

WordPress’te Neden jQuery SSS Akordeonu Kullanılmalı?

Web tasarımında akordeon, içeriği düzgün bir şekilde düzenlemek için kullanılan bir araçtır. Her bir öğenin üzerine tıkladığınızda daha fazla ayrıntı göstermek için genişlediği ve işiniz bittiğinde daraldığı bir liste gibi görünür. Sayfayı karıştırmadan ekstra bilgileri gizlemenin veya göstermenin basit bir yoludur.

Bu arada jQuery, web sitenize etkileşimli özellikler eklemeyi basitleştiren bir JavaScript kütüphanesidir. Örneğin, sıfırdan karmaşık kod yazmak zorunda kalmadan animasyonlar, açılır menüler ve tıklanabilir düğmeler gibi şeyler eklemenizi sağlar.

Bu, WordPress’te bir jQuery SSS akordeonu kullanmanın sitenizi daha düzenli ve kullanıcı dostu hale getirebileceği anlamına gelir. Sık sorulan soruları katlanabilir bir formatta görüntülemenizi sağlayarak yerden tasarruf etmenizi ve dağınıklığı azaltmanızı sağlar.

SeedProd FAQ accordion preview

Bu şekilde, ziyaretçiler uzun metin blokları arasında gezinmeden ihtiyaç duydukları yanıtları hızla bulabilirler. Bu, sitenize temiz bir görünüm kazandırabilir ve içeriğinizi arama motorlarının tercih ettiği daha yapılandırılmış hale getirerek SEO’yu geliştirebilir.

Bunu söyledikten sonra, WordPress’te bir jQuery SSS akordeonunun nasıl kolayca ekleneceğine bir göz atalım. Bu eğitimde birden fazla yöntemden bahsedeceğiz, ancak istediğiniz yönteme atlamak için aşağıdaki bağlantıları kullanabilirsiniz:

Yöntem 1: WPCode ile jQuery SSS Akordeonu Ekleme (Önerilen)

Bir jQuery SSS akordeonu eklemek için kolay ve güvenilir bir yol arıyorsanız, bu yöntem tam size göre.

Bu yaklaşım için piyasadaki en iyi WordPress kod parçacıkları eklentisi olan WPCode‘a ihtiyacınız olacak. Web sitenize özel kod eklemenin en kolay ve en güvenli yoludur. Ayrıca, SSS akordeonu için önceden hazırlanmış bir kod parçacığı ile birlikte gelir, bu da onu ideal bir seçim haline getirir.

İlk olarak, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılar için WordPress eklentisinin nasıl kurulacağına ilişkin eğitimimize bakın.

Not: WPCode’un ücretsiz bir planı vardır, ancak kod parçacıklarından oluşan bulut kitaplığının kilidini açmak için premium sürüme ihtiyacınız olacaktır.

Etkinleştirmenin ardından, WordPress kontrol panelinden Kod Parçacıkları ” + Parçacık Ekle sayfasını ziyaret edin ve ‘SSS Akordeonu’ parçacığını bulmak için arama formunu kullanın.

Bunu yaptıktan sonra, altındaki ‘Snippet Kullan’ düğmesine tıklayın.

Click the Use Snippet button under the FAQ Accordion snippet

Bu sizi ‘Snippet Düzenle’ sayfasına yönlendirecek ve burada SSS akordeonu için özel kod ‘Kod Önizleme’ kutusuna zaten eklenmiş olacaktır.

Burada, akordeonunuz için soru ve cevapları kodun içine yazmanız yeterlidir. Bunu yaptıktan sonra, üstteki anahtarı ‘Etkin’ olarak değiştirin ve ‘Güncelle’ düğmesine tıklayın.

Add FAQs in the snippet

Şimdi blok düzenleyicide SSS akordeon bölümünü eklemek istediğiniz sayfayı veya yazıyı açın.

Burada, blok menüsünü açmak için ‘Blok Ekle’ (+) düğmesine tıklayın ve ‘WPCode’ bloğunu sayfaya ekleyin. Şimdi, daha önce oluşturduğunuz ‘SSS Akordeonu’ kod parçacığını seçmek için blok içindeki açılır menüyü açın.

Bu işlem tamamlandıktan sonra, ayarlarınızı kaydetmek için üstteki ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Add WPCode block

Şimdi SSS akordeonunu çalışırken görmek için WordPress sitenizi ziyaret edin.

Diğer sayfalar için bir akordeon oluşturmak için işlemi tekrarlamanız gerekeceğini unutmayın.

jQuery FAQ Accordion preview

Yöntem 2: Ücretsiz Bir Eklenti ile jQuery SSS Akordeonu Ekleyin (Kolay)

Web sitenizde herhangi bir özel kod kullanmak istemiyorsanız, bu yöntem tam size göre.

Öncelikle Advanced Accordion Gutenberg Block eklentisini yüklemeniz ve etkinleştirmeniz gerekecek. Daha fazla bilgi için bir WordPress eklentisinin nasıl kurulacağına ilişkin başlangıç kılavuzumuza bakın.

Etkinleştirmenin ardından, SSS eklemek istediğiniz sayfayı veya gönderiyi açın ve üstteki ‘Blok Ekle’ (+) düğmesine tıklayın. Blok menüsü göründüğünde, ‘Ayrı Akordeon’ bloğunu bulun ve sayfaya ekleyin.

Add separate accordion block

Ardından, ilk sorunuzu ve cevabınızı akordeon bloğunun içine yazın.

Ardından, aynı ad altındaki sekmeyi genişleterek ve ‘Etkinleştir’ anahtarını açarak blok panelinden bir SSS şeması ekleyebilirsiniz.

Enable the FAQ schema

Bundan sonra, sağ sütundaki ‘Stiller’ bölümüne geçin. Buradan akordeon metin rengini, arka plan rengini, simge rengini ve çok daha fazlasını özelleştirebilirsiniz.

Ardından, istediğiniz kadar SSS eklemek için bu işlemi tekrarlayabilirsiniz.

Customize accordions

Son olarak, ayarlarınızı kaydetmek için sayfanın üst kısmındaki ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.

Şimdi, jQuery akordeonunu çalışırken görmek için SSS sayfanızı ziyaret edin.

FAQ accordion created with a free plugin

Yöntem 3: SeedProd ile bir jQuery SSS Akordeonu Ekleyin

Özel bir sayfaya etkileşimli bir SSS bölümü eklemek istiyorsanız, bu yöntem tam size göre.

Bunu yapmak için SeedProdu kullanabilirsiniz. Sayfalarınıza genişleyen ve daralan metin bölümleri eklemek için özel bir akordeon bloğu ile birlikte gelen en iyi WordPress sayfa oluşturucusudur.

Öncelikle SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla bilgi edinmek için WordPress eklentisi yükleme kılavuzumuza bakın.

Not: SeedProd’un ücretsiz bir planı vardır. Ancak, ‘Akordeon’ bloğunun kilidini açmak için pro sürüme ihtiyacınız olacaktır.

Etkinleştirmenin ardından, lisans anahtarınızı girmek için SeedProd ” Ayarlar sayfasına gidin. Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz.

Paste license key in the field

Bundan sonra, WordPress yönetici kenar çubuğundan SeedProd ” Açılış Sayfaları ekranını ziyaret edin.

Buradan, ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklayın.

Click the Add New Landing Page button

Bu sizi, aralarından seçim yapabileceğiniz önceden hazırlanmış şablonların bir listesini göreceğiniz yeni bir ekrana götürecektir.

Bir seçim yaptığınızda, sizden bir sayfa adı ve URL girmenizi isteyen bir istem göreceksiniz. Ayrıntıları girin ve devam etmek için ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklayın.

Add a name for the FAQs page

SeedProd’un sürükle-bırak oluşturucusu şimdi ekranınızda açılacaktır. Burada, solda bir blok sütunu ve sağda bir sayfa önizlemesi göreceksiniz.

Artık sayfanıza resim, video, CTA düğmesi, başlık veya metin bloğu gibi herhangi bir öğe ekleyebilirsiniz. Bundan sonra, SSSlerinizi eklemek istediğiniz yere‘Akordeon‘ bloğunu sürükleyip bırakın.

Add the accordion block in the page builder

Ardından, sol sütunda ayarlarını açmak için bloğa tekrar tıklayın. Buradan, ‘Akordeon 1’ sekmesini genişletin ve ilk SSS’nizi yazmaya başlayın.

Şimdi diğer girişleri eklemek için işlemi tekrarlayabilirsiniz.

Add your first FAQ in SeedProd

Varsayılan olarak, blok yalnızca iki akordeon ekler, ancak istediğiniz kadar SSS eklemek için ‘Yeni Öğe Ekle’ düğmesine tıklayabilirsiniz.

Verilen kaydırıcıları kullanarak yazı tipi boyutunu ve her akordeon arasındaki boşluğu bile yapılandırabilirsiniz.

Add new accordion

Ardından, üst kısımdan ‘Gelişmiş’ sekmesine geçin.

Buradan, akordeonun metin rengini, başlık rengini, arka plan rengini ve bölücü rengini değiştirebilirsiniz.

Customize your FAQs and publish the page

İşiniz bittiğinde, üstteki ‘Kaydet’ ve ardından ‘Yayınla’ düğmesine tıklayın.

Artık jQuery SSS akordeonunuzu görüntülemek için yeni oluşturulan özel sayfayı ziyaret edebilirsiniz.

SeedProd FAQ accordion preview

Bonus: WordPress’te SSS Şeması Ekleme

Bu jQuery SSS akordeonlarını ekledikten sonra, bunlar için SSS şeması eklemek iyi bir fikirdir. Bu, sık sorulan sorularınızın doğrudan Google’ın arama sonuçlarında görünmesini sağlayarak SEO sıralamanızı ve organik tıklama oranınızı artırabilir.

Bunun için piyasadaki en iyi SEO eklentisi olan All in One SEO‘yu öneriyoruz. Sitenizi arama motorları için optimize eden ve sadece birkaç tıklama ile daha üst sıralarda yer almasına yardımcı olan hepsi bir arada bir çözümdür.

Bu aracı son birkaç yıldır WPBeginner’da kullanıyoruz ve o zamandan beri arama sıralamalarımızda gözle görülür iyileşmeler gördük. Ayrıntılar için AIOSEO incelememize bakın.

All in One SEO for WordPress

Araç, arama motorlarının içeriğinizi daha iyi anlamasına yardımcı olabilecek yerleşik bir şema işaretleme özelliği ile birlikte gelir. Eklentiyi etkinleştirdikten sonra, SSS sayfanızı blok düzenleyicide açmanız yeterlidir.

Ardından, ‘AIOSEO Ayarları’ bölümüne gidin ve ‘Şema’ sekmesine geçin. Buradan ‘Şema Oluştur’ butonuna tıklayın.

All in One SEO Schema Settings

Bu, SSS seçeneğini bulmanız ve yanındaki ‘Şema Ekle’ düğmesine tıklamanız gereken ‘Şema Kataloğu’nu açacaktır.

Bundan sonra, SSS’lerinizi akordeonunuzda göründükleri gibi ekleyebilirsiniz. İşiniz bittiğinde, ayarlarınızı kaydetmek için ‘Şema Ekle’ düğmesine tıklamanız yeterlidir.

Add name and description for FAQ

Artık arama motorları bu soruları indeksleyecek ve arama sonuçları sayfalarında göstererek sıralamanızı iyileştirecektir.

Ayrıntılar için WordPress’te SSS şemasının nasıl ekleneceğine ilişkin eğitimimize bakın.

Umarız bu makale WordPress’te jQuery SSS akordeonunun nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Ayrıca WordPress sitenizde kodu nasıl kolayca görüntüleyebileceğinizle ilgili kılavuzumuzu ve en iyi WordPress geliştirme araçları için en iyi seçimlerimizi görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

46 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Zac Smith

    Hello, I installed the Quick and Easy FAQ plugin, and then followed this video. I do not get an accordion FAQ, rather the only thing that shows up is the first FAQ question and answer … and the question is hyperlinked.

  3. Daniel

    Great tutorial!

    My debugger complained about undefined variable $faq.
    Defined variable at begin of function accordion_shortcode() with $faq = ”;

    As well my version of FAQ plugin enters the value ‘faq’ instead of ‘query’ into the field post_type of the table postes.

    Adjusted line 23:
    ‘post_type’ => ‘faq’,

  4. Johan Johnsson

    It’s silly that you’ll have us install a plugin for a FAQ page and follow your previous tutorial on how to make that FAQ page, and then copy (essentially download) the plugin you made for this tutorial. So we’re essentially downloading 2 already finished plugins.

    I don’t think people come here to download 2 plugins, but rather to LEARN how to make a custom accordion menu of their own. I don’t see why I should follow this “how to guide” when I can just download some other WP plugin that does the same job, if not better.

    And the fact that this plugin relies on the FAQ plugin seems quite unnecessary. Why didn’t you make a stand-alone plugin and make it dynamic? So you can use it for any content on any page.

    • WPBeginner Support

      Hi Johan,

      Most our users are beginners who would find it difficult to copy paste code. This is why we made it into a plugin so that users can download and install it. If you would like to use the code method, then the code is here for you to study and use it in your theme or a site-specific plugin. Let’s us know if you need any help with that.

      Yönetici

  5. Kim

    How do I make it so that when I click the title it collapses – I see that it collapses when you click another part of the accordian but I am looking for the function to collapse when each title is clicked.

  6. christina

    thanks for the tutorial. I am very much new to coding and webpage design. I have followed instructions to pasting the codes to my notepad on my mac. Is there a different way to save the file other than in notepad as a php or js file into the folder? Also, could you please let me know step by step how to open FTP client (what is it btw?) and how to upload my-accordian folder to /wp-contnt/plugins/directory to WP website. Thanks so much.

  7. Nurul Amin

    I have activated this plugins successfully, but it is not working. Displaying nothing in my FAQs Page.

  8. WPBeginner Staff

    The code screenshot you shared, does not look like the code we have shared above. However, the code in screenshot has HTML tags that shouldn’t be there. It should be like this:

    ‘posts_per_page’ => ’10’,

    • Stefan 13

      This is pretty weird. Your comments had me baffled, as I was clearly seeing the code right there on my screen. I then realised that all those currency converter tags came from another one of my Firefox plugins, which dynamically adds a context menu to numbers in web pages – hence the source looked different.
      Thanks for your help!

  9. Stefan 13

    When I try to activate the plugin in WP 4.1, I get this error message:

    Plugin could not be activated because it triggered a fatal error.

    Parse error: syntax error, unexpected ‘<' in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php on line 20

    Any ideas that may help with this?

    • WPBeginner Staff

      The code you pasted has an unexpected character 10,

      Make sure posts_per_page is enclosed in single quotes. Make sure there is an equals sign before greater than sign and make sure there is a comma at the end of the line.

      • Guest

        I don’t have that on line 20. What I can see on line 20 in the post above and in my file is this:

        ‘posts_per_page’ => 10,
        Screen shot attached as well.
        So does the post above display incorrect file content?

      • Stefan 13

        The code in my file does not look like what you posted for line 20, but it’s the same code as is above:

        ‘posts_per_page’ => 10,
        ‘orderby’ => ‘menu_order’,

        Does that mean that the code in the article is out-of-date?
        Thanks for clarifying!

        Screen shot attached:

  10. Caroline

    Thank you for this tutorial! It’s really help with my problem!

    I want to put topics like this: Topic “Events”: a accordion box and “Past Events”: another accordion box with topic Past Events. I tried the shortcode [faq_accordion + topic=”events”] but nothing happened. What can I do? Thank you very much!!!

  11. raouf

    hello .. thank you for this tutorial, it’s helpful . but i just make a simple modification to make a accordion for a specific category . it worke’s but it show me the classic editor of my post not the visual editor. can you help me

  12. Rana

    Hi
    Is there a way I can just dispay the “category title i.e FAQ Topic ” and the topic listed under each.
    I dont want the whole content,just the category title and clicking on it would show the topic title )

    Raba

  13. Chris

    What’s the best way of getting the CSS to work? I have a child theme with my custom css code. Do I need to do anything in that file since I don’t see any of the Google css.

    • WPBeginner Support

      Chris the Google CSS is queued and only fetched when your FAQ accordion is displayed. Open the page containing your FAQ Accordion and right click then select View Source. On the view source page look for http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css if it is there then this means you have successfully loaded CSS theme.

      Yönetici

  14. Chris S.

    I am able to get your plugin to work properly with the FAQ Manager but had some questions. It will only display 10 of the FAQs (which I presume is a default #). If I use the built-in shortcode that comes with the FAQ Manager plugin I am able to get the full list to display

    To display ALL: place [faq limit=”-1″] on a post / page

    Do you have any suggestions on how to handle this?

    Also, the FAQ manager allows for creating different lists by topic. Would there be a simple way to modify your plugin to make use of this?

    List all from a single FAQ topic category: place [faq faq_topic=”topic-slug”] on a post / page

    Great work otherwise!

    • WPBeginner Support

      To display FAQs with topics FAQ Manager uses these parameters in the shortcode:

      [faq faq_topic="topic-slug"]

      [faq limit=”-1″] is quite self explanatory. It will display all FAQ.

      However, if you want to display more FAQ’s in the accordion you need to modify the query parameter in WPBeginner’s FAQ Accordion plugin, like this:

      // Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
      $posts = get_posts(array( 
      
      // Increase posts per page
      'posts_per_page' => 50, 
      
      // Get only FAQs under a specific topic
      // faq-topic is a taxonomy 
      //topic-name is the name of topic you want to display
      
      'faq-topic' => 'topic-name',
      'orderby' => 'menu_order',
      'order' => 'ASC',
      'post_type' => 'question',
      )); 
      

      Yönetici

      • Chris S.

        Great- thanks for your help with this!

  15. Garrett

    This isn’t working for me quite as intended. Plugin activates successfully and the shortcode is being processed, but here’s what the output looks like…

    I opted to use the FAQ manager plugin with your code in order to fix the hideous styling the plugin spits out.

    But when it’s all said and done, here’s what it looks like. Any tips?
    http://screencast.com/t/K2VfuBOptcn

    Many thanks in advance!!
    ~Garrett
    Atlanta, GA

    • Garrett

      It seems the list is not inheriting any styling info from jquery-ui.css, though I did verify that a link file to jquery-ui.css IS present on the page.

      Line where jquery-ui.css is included:
      Exploring CSS rules:

      How can this be?

      Thank you!
      ~Garrett

  16. Richard Morrison

    This has broken following the latest Wordpress Update. I can no longer get the accordion to display. Shortcode now only displays the text from FAQ manager.

  17. Piet

    line 20 of your my-accordion.php file reads: ‘numberposts’

    that function has been deprecated since…. a very long time.

    as you guys are in the business of giving tutorials to beginners, can you at least get the functions right?

    obviously this should be ‘posts_per_page’

  18. Mary-Anne

    I would appreciate some help with this. I am attempting to install on a 3.5.2 on a network site. Network Admin has the Plugin listed and Network Activated.

    However it is not listed in the sub-sites.

    Has this been tested with Network sites yet? It looks like just what is needed. Thanks for all your efforts with WPBEGINNER.

    Thanks.

    • Editorial Staff

      This sounds like a support question that needs to be posted on the plugin forum.

      Yönetici

  19. birge

    Hi,
    I made my-accordion.php and accordion.js, uploaded them and everything, but still I can’t see the plugin in the list of plugins. What went wrong?
    Thanks,
    birge

    • Editorial Staff

      Are you sure that the plugin file location is something like this: /wp-content/plugins/accordion/my-accordion.php

      Yönetici

  20. alin

    I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it :)

  21. curdaneta

    You forgot include the script file “accordion.js” …

    • Editorial Staff

      We shared the accordion.js code in there. It is also being included using enqueue script.

      Yönetici

      • curdaneta

        Sorry, but I find the link to the file

        • Editorial Staff

          There is no link to the file. We have shared the code that you need to paste in a new file that you will create called accordion.js

      • curdaneta

        Sorry, my bad
        I didn’t read carefully. Now everything works as expected
        curdaneta

  22. curdaneta

    Hello
    It doesn’t work for me using the shortcode in several paragraph
    Regards
    curdaneta

  23. Gaelyn

    Thanks. I can see where this will come in very handy.

  24. Drake

    Thank you for the article. It would be nice have a similar one that explain how to introduce jQuery tabs to pages/posts.

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.