Создание форматированного меню в виде таблицы
-
-
Вы разместили этот вопрос под другим именем пользователя около двух недель назад.Это называлось «Настройка редактируемого макета в редакторе wordpress WYSIWYG».Вы удалили его,но его все еще можно найти в кеше Google.Это почти копия этого.Пожалуйста,не делай этого.You posted this question under a different username about two weeks ago. It was called "Setting up an editable layout in the wordpress WYSIWYG editor". You removed it but it can still be found in Google's cache. This is a near copy/paste of that one. Please don't do that.
- 0
- 2013-01-02
- s_ha_dum
-
Мне пришлось повторно опубликовать его,потому что я случайно удалил его,и это не позволило мне сделать это снова.Я не собираюсь повторять публикацию,но если его на самом деле не удается найти,мне нужно было как-то восстановить его.I had to re-post it because I accidentally deleted it and it wouldn't let me do it again. I don't mean to re-post but if it can't actually be found I needed to get it back up some how.
- 0
- 2013-01-02
- kia4567
-
Это вопрос HTML/CSS,а не WordPress.This is an HTML/CSS question, not a WordPress one.
- 0
- 2013-01-02
- s_ha_dum
-
Я ищу плагин,который организует редактор WYSIWYG.Стандартный отступ: 10 пикселей в этом случае не работает,поэтому я считаю,что это связано с wordpress.I am looking for a plugin that organizes the WYSIWYG editor though. The standard padding: 10px isn't working in this case, so I believe it will have to do with wordpress.
- 0
- 2013-01-02
- kia4567
-
Рекомендации плагинов не по теме.См. [Faq].Plugin recommendations are off topic. See the [faq].
- 0
- 2013-01-02
- s_ha_dum
-
1 ответ
- голосов
-
- 2013-01-03
Я думаю,что ваш вопрос является прекрасным примером проблемы XY . В WordPress вы не создаете такое меню в редакторе сообщений. Вы пользуетесь меню.
Как только вы начнете думать о своей проблеме с этого момента,все станет просто. :)
Сначала зарегистрируйте настраиваемое меню навигации для этого списка в файле
functions.php
вашей темы:add_action( 'wp_loaded', 'wpse_78027_register_menu' ); function wpse_78027_register_menu() { register_nav_menu( 'services', __( 'A list of your services. Edit the description!', 'theme_textdomain' ) ); }
Теперь у вас есть интерфейс для меню в
wp-admin/nav-menus.php
.Тогда вам понадобится настраиваемый ходунок,который бы отображал не только текст ссылки. Вам повезло,эта проблема была устранена тоже решил . Вам нужна очень простая разметка,поэтому…
/** * Custom walker to render the services menu. */ class WPSE_78027_Services_Menu extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 ) { $output .= '<li>'; $attributes = ''; if ( ! empty ( $item->url ) ) $attributes .= ' href="' . esc_url( $item->url ) .'"'; $description = empty ( $item->description ) ? '<p>Please add a description!</p>' : wpautop( $item->description ); $title = apply_filters( 'the_title', $item->title, $item->ID ); $item_output = "<a $attributes><h3>$title</h3> <div class='service-description'>$description</div></a>"; // Since $output is called by reference we don't need to return anything. $output .= apply_filters( 'walker_nav_menu_start_el' , $item_output , $item , $depth , $args ); } }
Теперь вам нужно добавить страницы в это меню. Не забудьте отредактировать описание или принудительно установить это поле быть видимым :
А теперь склеиваем. Откройте файл PHP шаблона страницы,в котором вы хотите использовать меню,и добавьте:
wp_nav_menu( array ( 'container' => FALSE, 'depth' => 1, 'items_wrap' => '<ul id="service-menu">%3$s</ul>', 'theme_location' => 'services', 'walker' => new WPSE_78027_Services_Menu ) );
Отлично.
Теперь вы можете стилизовать этот список в своей таблице стилей,не затрагивая другие таблицы.
Пример кода:
#service-menu { background: #aaa685; border-collapse: separate; border-spacing: 10px; display: table; width: 100%; } #service-menu, #service-menu li { border: 3px solid #e9e9e9; } #service-menu li { display: table-cell; list-style: none; padding: 10px; width: 25%; } #service-menu, #service-menu a { color: #fff; } #service-menu h3 { font: bold 1.5em/1 serif; margin: 0 0 .5em; text-transform: uppercase; } .service-description { font: .9em/1.4 sans-serif; }
Результат:
На написание этого ответа ушло больше времени,чем на написание кода. :)
I think your question is a perfect example for the XY Problem. In WordPress you do not create such a menu in a post editor. You use a menu.
Once you start thinking about your problem from this point, everything is easy. :)
First register a custom navigation menu for this list in your theme’s
functions.php
:add_action( 'wp_loaded', 'wpse_78027_register_menu' ); function wpse_78027_register_menu() { register_nav_menu( 'services', __( 'A list of your services. Edit the description!', 'theme_textdomain' ) ); }
Now you get an interface for the menu in
wp-admin/nav-menus.php
.Then you need a custom walker to show more than just the link text. You are lucky, this problem has been solved too. You need very simple markup, so …
/** * Custom walker to render the services menu. */ class WPSE_78027_Services_Menu extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 ) { $output .= '<li>'; $attributes = ''; if ( ! empty ( $item->url ) ) $attributes .= ' href="' . esc_url( $item->url ) .'"'; $description = empty ( $item->description ) ? '<p>Please add a description!</p>' : wpautop( $item->description ); $title = apply_filters( 'the_title', $item->title, $item->ID ); $item_output = "<a $attributes><h3>$title</h3> <div class='service-description'>$description</div></a>"; // Since $output is called by reference we don't need to return anything. $output .= apply_filters( 'walker_nav_menu_start_el' , $item_output , $item , $depth , $args ); } }
Now you have to add the pages to that menu. Do not forget to edit the description, or force that field to be visible:
And now stick it together. Open the page template PHP file where you want to use the menu and add:
wp_nav_menu( array ( 'container' => FALSE, 'depth' => 1, 'items_wrap' => '<ul id="service-menu">%3$s</ul>', 'theme_location' => 'services', 'walker' => new WPSE_78027_Services_Menu ) );
Perfect.
In your stylesheet you can style this list now without affecting any other table.
Sample code:
#service-menu { background: #aaa685; border-collapse: separate; border-spacing: 10px; display: table; width: 100%; } #service-menu, #service-menu li { border: 3px solid #e9e9e9; } #service-menu li { display: table-cell; list-style: none; padding: 10px; width: 25%; } #service-menu, #service-menu a { color: #fff; } #service-menu h3 { font: bold 1.5em/1 serif; margin: 0 0 .5em; text-transform: uppercase; } .service-description { font: .9em/1.4 sans-serif; }
Result:
Writing this answer took more time than writing the code. :)
-
Я отбросил _Read More_,потому что четыре ссылки с одинаковыми именами очень раздражают пользователей программ чтения с экрана,а вся рамка представляет собой ссылку.I dropped the _Read More_, because four links with the same name are super annoying for screen reader users, and the whole box is a link.
- 0
- 2013-01-03
- fuxia
-
Ваш потрясающий тощо!Я буду работать над этим сегодня вечером,если бы я мог дать вам баллы,я бы (не то,чтобы они вам нужны. Ха-ха),но это было бы,чтобы показать вам,как я ценю,что вы нашли время,чтобы написать этот длинный ответдля меня.Я рассмотрю эту проблему XY,чтобы в следующий раз задать правильный вопрос.БЛАГОДАРЮ ВАС!Your amazing toscho! I'll be working on this tonight, if I could give you points I would (not that you need them. Haha) but it would be to show you how much I appreciate you taking the time out of your day to write this long answer for me. I'll look into that XY problem so I be sure to ask the correct question for next time. THANKYOU!
- 1
- 2013-01-03
- kia4567
Я только что разместил этот сайт пару недель назад и добавил на него еще кое-что для мой друг,но должен быть более простой способ выкладывать контент поверх wordpress. Мне даже это сложно,и я кодирую половину этого (или,по крайней мере,добавляю стили,смотрю CSS и т. Д.)
Я специально смотрю на сервисы (практически единственное,что есть на этой тестовой странице) и на то,как их размещать. Они находятся в уродливых таблицах,которыми,кажется,я даже забыл,как ими пользоваться,но как еще я должен размещать такой контент? Есть ли плагин,который облегчит мне жизнь (Премиум? - Я слышал о Типах или Представлениях,это хороший плагин?).
Однако,поскольку я до сих пор работал над этим,как лучше всего получить заполнение внутри этих ячеек? Я пробовал почти все,но это либо не работает,либо влияет на ВСЕ таблицы на странице (исходная страница,где будет который здесь ).
Я добавил сюда код неверной таблицы,вы хотите его увидеть ..