• 06-02-2023, 03:00:10
    #1
    Merhaba,

    Yapmak istediğim şeyi açıklıyayım;

    - WordPress'de uzun bir içerik oluşturacağım. İçeriğin üst kısmına (header kısmına değil, içeriğin içine) 1 arama kutusu ekleyeceğim.

    - Kullanıcı içerikte bulmak istediği kelimeyi bu arama alanına yazdığında, tüm içerik filitrelenecek ve sadece aradığı kelimenin geçtiği kısımlar karşısına gelecek. Enter tuşuna basmasına gerek olmayacak.

    Örneğin içerik araba bakımı hakkında genel bir yazı olsun. Kullanıcı arama kısmına "enjektör" yazdığında, sadece "Enjektör nasıl sökülür" kısmı gelecek ve altında da kısa cevabı görebilecek.

    Bunun yapan bir eklenti mevcut mu?

    Teşekkürler
  • 06-02-2023, 03:08:30
    #2
    https://wordpress.org/plugins/add-search-to-menu/
    Bu eklenti var.
    Tam dediğiniz gibi olur mu bilmiyorum ama biraz özelleştirme ile yakalanır sanırım hocam.
    https://wordpress.org/plugins/posts-search/
    Aynı şekilde bu da var hem shortcode'u da var.
  • 06-02-2023, 03:12:34
    #3
    Buradaki kod işinizi görecektir
    <!DOCTYPE html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

    * {

    box-sizing: border-box;

    }



    #myInput {

    background-image: url('/css/searchicon.png');

    background-position: 10px 12px;

    background-repeat: no-repeat;

    width: 100%;

    font-size: 16px;

    padding: 12px 20px 12px 40px;

    border: 1px solid #ddd;

    margin-bottom: 12px;

    }



    #myUL {

    list-style-type: none;

    padding: 0;

    margin: 0;

    }



    #myUL li a {

    border: 1px solid #ddd;

    margin-top: -1px; /* Prevent double borders */

    background-color: #f6f6f6;

    padding: 12px;

    text-decoration: none;

    font-size: 18px;

    color: black;

    display: block

    }



    #myUL li a:hover:not(.header) {

    background-color: #eee;

    }

    </style>

    </head>

    <body>





    <h2>My Phonebook</h2>



    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">



    <ul id="myUL">

    <li><a href="#">Adele</a></li>

    <li><a href="#">Agnes</a></li>



    <li><a href="#">Billy</a></li>

    <li><a href="#">Bob</a></li>



    <li><a href="#">Calvin</a></li>

    <li><a href="#">Christina</a></li>

    <li><a href="#">Cindy</a></li>

    </ul>



    <script>

    function myFunction() {

    var input, filter, ul, li, a, i, txtValue;

    input = document.getElementById("myInput");



    filter = input.value.toUpperCase();

    ul = document.getElementById("myUL");

    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {

    a = li[i].getElementsByTagName("a")[0];

    txtValue = a.textContent || a.innerText;

    if (txtValue.toUpperCase().indexOf(filter) > -1) {

    li[i].style.display = "";

    } else {

    li[i].style.display = "none";

    }

    }

    }

    </script>



    </body>

    </html>
  • 06-02-2023, 03:30:59
    #4
    wojak adlı üyeden alıntı: mesajı görüntüle
    https://wordpress.org/plugins/add-search-to-menu/
    Bu eklenti var.
    Tam dediğiniz gibi olur mu bilmiyorum ama biraz özelleştirme ile yakalanır sanırım hocam.
    https://wordpress.org/plugins/posts-search/
    Aynı şekilde bu da var hem shortcode'u da var.
    Teşekkür ederim hocam önerileriniz için. 2 eklentiyi de ayrı ayrı kurup denedim ancak maalesef yazı içinde değilde, site genelinde arama yapıyor ajax ile.

    TaRRuZ adlı üyeden alıntı: mesajı görüntüle
    Buradaki kod işinizi görecektir
    <!DOCTYPE html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

    * {

    box-sizing: border-box;

    }



    #myInput {

    background-image: url('/css/searchicon.png');

    background-position: 10px 12px;

    background-repeat: no-repeat;

    width: 100%;

    font-size: 16px;

    padding: 12px 20px 12px 40px;

    border: 1px solid #ddd;

    margin-bottom: 12px;

    }



    #myUL {

    list-style-type: none;

    padding: 0;

    margin: 0;

    }



    #myUL li a {

    border: 1px solid #ddd;

    margin-top: -1px; /* Prevent double borders */

    background-color: #f6f6f6;

    padding: 12px;

    text-decoration: none;

    font-size: 18px;

    color: black;

    display: block

    }



    #myUL li a:hover:not(.header) {

    background-color: #eee;

    }

    </style>

    </head>

    <body>





    <h2>My Phonebook</h2>



    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">



    <ul id="myUL">

    <li><a href="#">Adele</a></li>

    <li><a href="#">Agnes</a></li>



    <li><a href="#">Billy</a></li>

    <li><a href="#">Bob</a></li>



    <li><a href="#">Calvin</a></li>

    <li><a href="#">Christina</a></li>

    <li><a href="#">Cindy</a></li>

    </ul>



    <script>

    function myFunction() {

    var input, filter, ul, li, a, i, txtValue;

    input = document.getElementById("myInput");



    filter = input.value.toUpperCase();

    ul = document.getElementById("myUL");

    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {

    a = li[i].getElementsByTagName("a")[0];

    txtValue = a.textContent || a.innerText;

    if (txtValue.toUpperCase().indexOf(filter) > -1) {

    li[i].style.display = "";

    } else {

    li[i].style.display = "none";

    }

    }

    }

    </script>



    </body>

    </html>
    Hocam aradığım tamda bunu sağlayacak bir eklenti. Bunu içeriğe uygun hale getirmeye çalışacağım.
  • 06-02-2023, 14:47:05
    #5
    düzeldi