Как настроить форму поиска WordPress? - PullRequest
Новая
       9

Как настроить форму поиска WordPress?

1 голос
/ 19 августа 2009

Миссия

Я бы хотел настроить поле поиска и кнопку в моем блоге WordPress.

У текстового поля и кнопки поиска, которые я имею в виду, будет три состояния:

off

:hover

:focus

Мне потребуется три разных DIV-идентификатора для каждого из этих состояний.

Особенности текстового поля поиска

Кроме того, мне понадобится текст «поиск по сайту», изначально загруженный в текстовое поле поиска. когда пользователь щелкает текстовое поле поиска, исходный текст исчезает, а курсор пользователя мигает. пользователь может затем ввести свое ключевое слово для поиска. если после ввода ключевого слова они случайно щелкают текстовое поле поиска, их ключевое слово остается в текстовом поле без изменений. если они решат удалить свое ключевое слово и щелкнуть по текстовому полю поиска, появится текст «поисковый сайт».

Особенности кнопки поиска

Кнопка поиска должна иметь текст «поиск», центрированный по вертикали и горизонтали.

Текущее состояние моего текстового поля поиска и кнопки

мою текущую форму поиска и сайт можно посмотреть здесь на criticear

Мне удалось сделать так, чтобы в текстовых полях формы моего комментария было три состояния, о которых я упоминал выше, так как я получил код из учебника по многопоточным комментариям WordPress оттодеструктуры.

Дело в том, что я не совсем понимаю, как взять эту форму комментария css и применить ее к текстовому полю и кнопке моего поиска. Вы можете проверить форму моего комментария на странице одного сообщения моего блог-критика

Вот моя форма поиска CSS: 

/*
SEARCH FORM
*/

form#searchform
                    {
                    display:block;
                    width:255px;
                    height:20px;
                    position:absolute;
                    top:56px;
                    left:753px;
                    }

.searchbutton
                    {
                    color: #0066ff;
                    border: 0px solid;
                    display:block;
                    width:45px;
                    height:20px;
                    background: #d2e4ff;
                    position:absolute;
                    top:0px;
                    left:202px;
                    -moz-border-radius-bottomright: 4px;
                    -moz-border-radius-topright: 4px;
                    -webkit-border-bottom-right-radius: 4px;
                    -webkit-border-top-right-radius: 4px;
                    font-size: 12px;
                    }

.searchbutton:hover
                    {
                    background-color: #0066ff;
                    color: #ffffff;
                    font-size: 12px;
                    }

.searchfield
                    {
                    background:url(/images/search-field-shadow.png) top left repeat-x #666666;
                    color: #eeeeee;
                    border: 0px solid;
                    position: absolute;
                    top:0px;
                    left:0px;
                    display:block;
                    width:200px;
                    height:20px;
                    -moz-border-radius-bottomleft: 4px;
                    -moz-border-radius-topleft: 4px;
                    -webkit-border-bottom-left-radius: 4px;
                    -webkit-border-top-left-radius: 4px;
                    font-size: 12px;
                    }

вот мой код searchform.php: 

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="searchfield" />
   <input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
</form>

Вот вызов php для поисковой формы, который у меня есть в header.php: 

    <?php get_search_form(); ?>

Если у вас есть вопросы или вам нужна дополнительная информация, дайте мне знать. Я надеюсь, что вы можете помочь. Спасибо.

1 Ответ

1 голос
/ 20 августа 2009

Вам нужно использовать CSS для стилизации формы, как вы хотите, и JavaScript или библиотеку JavaScript (например, jQuery), чтобы создать нужный эффект фокусировки / размытия. Я не собираюсь делать все это для вас, но я просто укажу вам правильное направление.

Прежде всего, вам не нужны «3 разных идентификатора DIV для каждого из этих трех состояний». У CSS есть псевдоселекторы для :hover и :focus, так что это все, что вам нужно. Если вы когда-нибудь поймете это или столкнетесь с проблемами браузера, вы всегда можете использовать JavaScript (опять же, я рекомендую jQuery).

Для эффекта «Поиск по сайту» в поле ввода вы будете делать что-то вроде этого (это jQuery): 

$('input[name=s]').focus(function(){
    if ($(this).val() == 'Search site')
        $(this).val('');
});
$('input[name=s]').blur(function(){
    if ($(this).val() == '')
        $(this).val('Search site');
});

Последнее, что я упомяну, это то, что ваши классы CSS searchfield и searchbutton делают ваш HTML более многословным, чем он должен быть. Вы можете легко получить доступ к этим полям в своем CSS без необходимости отдельного объявления их в своем HTML: 

#searchform input[name=s] { } /* use this instead of .searchfield */
#searchform input[type=submit] { } /* use this instead of .searchbutton */
...