WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

Настройка темы

Создаю тему на основе готового html шаблона. С шаблоном в комплекте идут файлы стилей, и вот в этих файлах прописано как должны отображаться некоторые виджеты(поиск, текстовое поле, последние записи и комментарии и календарь). При добавлении виджета через админку в сайдбар к этим виджетам не применяются никакие стили, т.е. они выводятся так как прописано в WordPress. Как сделать чтобы при добавлении виджета к нему применялись стили из шаблона html, чтобы они выводились так же как и в шаблоне.

Почти в каждой теме WordPress есть возможность ее настройки из админки, установка цвета фона, картинки, цвет шрифта и т.д. Как можно реализовать такую возможность, т.е. как кастомизировать тему?

Спасибо.

0
Гость
8.4 года назад
  • 0
    shevan222 wp-best.ru

    Надо скопировать код статического сайдбара из готового шаблона html в файл sidebar.php, потому что в коде будут прописаны все нужные стили и классы.

    И когда будешь регистрировать сайдбар, можешь указать необходимую разметку

    if ( function_exists( 'register_sidebar' ) ) {
    register_sidebar( array (
    	'name' => __( 'Primary Sidebar', 'primary-sidebar' ),
    	'id' => 'primary-widget-area',
    	'description' => __( 'The primary widget area', 'dir' ),
    	'before_widget' => '<div class="subHeader">',
    	'after_widget' => "</div>",
    	'before_title' => '<h3>',
    	'after_title' => '</h3>',
    ) );
    }

    Указываешь нужные теги и классы, виджет обернется в div с классом subHeader, тайтл в h3

    mr_black 8.4 года назад

    Здравствуйте!
    Я так и делаю. Вот код из functions.php:

    function striped_widgets_init() {
    	register_sidebar( array(
    		'name' => esc_html__( 'Сайдбар', 'striped' ),
    		'id' => 'sidebar-left',
    		'description' => 'Виджеты сайдбара',
    		'before_title' => '',
    		'after_title' => '',
    		'before_widget' => '<div id="sidebar">',
    		'after_widget' => '</div>',
    	) );
    }

    Дело в том, что для каждого виджета прописаны свои стили,т.е. у каждого виджета есть свой класс. Вот, например:

    <!-- Search -->
    					<section class="box search">
    						<form method="post" action="#">
    							<input type="text" class="text" name="search" placeholder="Search" />
    						</form>
    					</section>
    
    				<!-- Text -->
    					<section class="box text-style1">
    						<div class="inner">
    							<p>
    								<strong>Striped:</strong> A free and fully responsive HTML5 site
    								template designed by <a href="http://n33.co/">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a>
    							</p>
    						</div>
    					</section>
    
    				<!-- Recent Posts -->
    					<section class="box recent-posts">
    						<header>
    							<h2>Recent Posts</h2>
    						</header>
    						<ul>
    							<li><a href="#">Lorem ipsum dolor</a></li>
    							<li><a href="#">Feugiat nisl aliquam</a></li>
    							<li><a href="#">Sed dolore magna</a></li>
    							<li><a href="#">Malesuada commodo</a></li>
    							<li><a href="#">Ipsum metus nullam</a></li>
    						</ul>
    					</section>

    Где то читал, что нужно какой то id виджета взять и поменять название класса на этот id, я только не очень догнал как это сделать.
    Вопрос про кастомизацию все еще актуален)
    А Вы случайно на киберфоруме не сидите? Просто человек с таким же ником мне там помог по одному вопросу.

    shevan 8.4 года назад

    Да, на киберфоруме с таким же ником зарегистрирован.

    'before_title' => '<header>
    							<h2>',
    		'after_title' => '</h2>
    						</header>',
    		'before_widget' => '<section class="box">',
    		'after_widget' => '</section>',

    Дополнительный класс можно выставить

    1. через плагин Widget CSS Classes (в виджетах появится поле класс, куда его и записываешь)

    2. в инспекторе браузера узнаешь id виджета
      находишь свой стиль в Style.css (допустим recent-posts), и добавляешь через запятую найденный id
      Вроде этого

    .recent-posts, #widget-2 section {
    // здесь твои стили
    }

    Кастомизация объемная тема. Если интересует что-то конкретное, возможно, смогу помочь.

    mr_black 8.4 года назад

    Для установки стилей выбрал второй вариант. Успел только для текстового виджета реализовать. Вот как было:

    .box.text-style1 .inner {
    		}

    Вот как стало:

    .box.text-style1 .inner,.textwidget {
    		}

    Вроде работает)
    На счет кастомизации. Меня интересует вся возможная информация о ней. Просто в будущем планирую заниматься профессиональной разработкой плагинов и тем. Вот решил начать с тем. Изучаю всю доступную информацию, только ее не так уж и много на русском, основная масса на анг. языке, с которым у меня трудности. Нашел на одном сайте статью про кастомизацию. Правда я не всю ее понял. Часть функций знакома, а часть нет. Если Вам интересно, то вот эта статья:
    http://truemisha.ru/blog/wordpress/theme-customizer.html#comments
    Может Вы подскажете куда мне двигаться дальше и что делать. Может сперва углубленно изучить php или функционал wordpress? Просто у меня ощущение, что я топчусь на месте.
    Спасибо

    shevan 8.4 года назад

    честно говоря, без английского тяжко будет. На англ. больше курсов (Lynda, Tustplus+, Tree house, Site Ground), но дело даже не в них, потому что они не продвинут выше advanced...
    А вот вы получаете возможность пользоваться всеми зарубежными популярными сайтами и форумами (у вас она уже есть smile ), смотреть конференции, чаты, и все другие девелопер ресурсы

    для старта с плагинами Plugin Handbook https://developer.wordpress.org/plugins/ - лучшего, бесплатного ресурса пожалуй нет

    На русском, увы, ничего предложить не могу (

    mr_black 8.4 года назад

    Да, английский в дальнейшем очень пригодится и в обучении и в разговоре с заказчиками, если конечно выйду на международную биржу фриланса. Начал изучать, но как то туго идет, но все таки идет)
    Спасибо Вам за помощь)
    Всех благ!

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация