Список категорий с миниатюрой и описанием на домашней странице
Мне действительно нужно комплексное решение этой проблемы, поэтому я предлагаю почти четверть своей репутации в качестве вознаграждения:)
Я хотел бы иметь плагин, который создает список пользовательских категорий на моей домашней странице. Для этого я бы хотел, чтобы экран "Редактирование категории" был дополнен некоторыми дополнительными функциями, как описано ниже...
- Добавляет обработчик "Загрузить/Удалить изображение" на экран редактирования категории для данной категории (это позволяет конечному пользователю загружать изображение это будет использоваться для представления категории. В идеале, при загрузке плагин должен автоматически изменять его размер до 125 пикселей в ширину.
- Добавляет поле ввода "Название категории" на экран редактирования категории для данной категории. Это дополнение к существующему полю "Имя" по умолчанию.
- Добавляет флажок "Показывать список на главной странице", чтобы разрешить выборочное отображение каждой категории в списке на главной странице.
- При просмотре домашней страницы плагин добавляет the_content с пользовательский список категорий, включая пользовательские миниатюры и названия каждой категории.
Результирующая разметка должна представлять собой неупорядоченный список без вложенности, например...
<ul class="custom-categories">
<li>
<span><a href="link-to-category-1"><img src="the-category-1-image" /></a></span>
<a href="link-to-category-1">Category 1 Title</a> The category description text goes here
</li>
<li>
<span><a href="link-to-category-2"><img src="the-category-2-image" /></a></span>
<a href="link-to-category-2">Category 2 Title</a> The category description text goes here
</li>
etc...
</ul>
Вот файл-заглушка, который я начал...
add_filter( 'the_content', 'cb_category_listing' );
function cb_category_listing( $content )
{
if ( is_home() ) {
$cat_args['title_li'] = '';
$cat_args['exclude_tree'] = 1;
$cat_args['exclude'] = 1;
$myContent = wp_list_categories(apply_filters('widget_categories_args', $cat_args));
$content .= $myContent;
}
return $content;
}
3 answers
Примечание: Это для более старых версий WP
Вот как добавить поля и сохранить значения на экране редактирования категории, а также способ добавления поля загрузки изображения.
Добавление полей на экран редактирования категории
Для начала нам нужно получить некоторый код, отображаемый на экране редактирования категории.
add_action( 'edit_category_form_fields', 'my_category_custom_fields' );
add_action( 'edit_category', 'save_my_category_custom_fields' );
function my_category_custom_fields( $tag ) {
// your custom field HTML will go here
// the $tag variable is a taxonomy term object with properties like $tag->name, $tag->term_id etc...
// we need to know the values of our existing entries if any
$category_meta = get_option( 'category_meta' );
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="category-title"><?php _e("Title"); ?></label></th>
<td>
<input id="category-title" name="category_meta[<?php echo $tag->term_id ?>][title]" value="<?php if ( isset( $category_meta[ $tag->term_id ] ) ) esc_attr_e( $category_meta[ $tag->term_id ]['title'] ); ?>" />
<span class="description"><?php _e('Enter an alternative title for this category.'); ?></span>
</td>
</tr>
<!-- rinse & repeat for other fields you need -->
<?php
}
Самый простой способ сохранить наши пользовательские значения - в таблице параметров (должно быть таксономия-мета-таблица на самом деле, но неважно). Таким образом, нам нужно сделать только один запрос, чтобы получить метаданные для всех наших категорий. Если у кого-то есть лучшая идея для хранения, тогда говорите!
function save_my_category_custom_fields() {
if ( isset( $_POST['category_meta'] ) && !update_option('category_meta', $_POST['category_meta']) )
add_option('category_meta', $_POST['category_meta']);
}
Для флажка вы просто сохраняете значение true или false, поэтому вы бы использовали category_extras[$tag->term_id][show_on_home]
для атрибута name и использовали значение, сохраненное в $category_meta
, чтобы определить, установлено оно или нет.
Возможно, вы захотите добавить дополнительную обработку или очистку в функцию сохранения - моя просто быстрая и грязная пример.
Поле изображения
Это довольно большой кусок кода и довольно сложный, поэтому я не буду здесь все объяснять, но в комментариях описывается назначение каждой функции. Мы можем обсудить это в комментариях, если вы хотите.
Следующие функции добавляют ссылку на экран редактирования категории, который вызывает всплывающее окно медиатеки wordpress/загрузки изображений. Затем вы можете загрузить изображение и нажать, чтобы использовать его. Затем вам будет доступен идентификатор изображения и URL-адрес миниатюры с помощью другая мета выше.
// add the image size you need
add_image_size( 'category_thumb', 125, 125, true );
// setup our image field and handling methods
function setup_category_image_handling() {
// add the image field to the rest
add_action( 'edit_category_form_fields', 'category_image' );
global $pagenow;
if ( is_admin() ) {
add_action( 'admin_init', 'fix_async_upload_image' );
if ( 'edit-tags.php' == $pagenow ) {
add_thickbox();
add_action('admin_print_footer_scripts', 'category_image_send_script', 1000);
} elseif ( 'media-upload.php' == $pagenow || 'async-upload.php' == $pagenow ) {
add_filter( 'media_send_to_editor', 'category_image_send_to_editor', 1, 8 );
add_filter( 'gettext', 'category_image_replace_text_in_thickbox', 1, 3 );
}
}
}
add_action( 'admin_init', 'setup_category_image_handling' );
// the taxonomy edit screen image field
function category_image( $tag ) {
// get our category meta data
$category_meta = get_option('category_meta');
?>
<tr class="form-field hide-if-no-js">
<th scope="row" valign="top"><label for="taxonomy-image"><?php _e("Image"); ?></label></th>
<td>
<div id="taxonomy-image-holder">
<?php if( !empty($category_meta[$tag->term_id]['image']) ) { ?>
<img style="max-width:100%;display:block;" src="<?php echo esc_attr( $category_meta[ $tag->term_id ]['image']['thumb'] ); ?>" alt="" />
<a id="taxonomy-image-select" class="thickbox" href="media-upload.php?is_term=true&type=image&TB_iframe=1"><?php _e('Change image'); ?></a>
<a class="deletion" id="taxonomy-image-remove" href="#remove-image">Remove image</a>
<?php } else { ?>
<a id="taxonomy-image-select" class="thickbox" href="media-upload.php?is_term=true&type=image&TB_iframe=1"><?php _e('Choose an image'); ?></a>
<?php } ?>
</div>
<input type="hidden" name="category_meta[<?php echo $tag->term_id ?>][image][id]" value="<?php if( isset($category_meta[ $tag->term_id ]['image']['id']) ) echo esc_attr($category_meta[ $tag->term_id ]['image']['id']); ?>" class="tax-image-id" />
<input type="hidden" name="category_meta[<?php echo $tag->term_id ?>][image][thumb]" value="<?php if( isset($category_meta[ $tag->term_id ]['image']['thumb']) ) echo esc_attr($category_meta[ $tag->term_id ]['image']['thumb']); ?>" class="tax-image-thumb" />
<span class="description"><?php _e('A category image.'); ?></span></td>
</tr>
<?php
}
// required for uploading images on non post/page screens
function fix_async_upload_image() {
if(isset($_REQUEST['attachment_id'])) {
$GLOBALS['post'] = get_post($_REQUEST['attachment_id']);
}
}
// are we dealing with the taxonomy edit screen?
function is_category_context() {
if ( isset($_SERVER['HTTP_REFERER']) && strpos($_SERVER['HTTP_REFERER'],'is_term') !== false ) {
return true;
} elseif ( isset($_REQUEST['_wp_http_referer']) && strpos($_REQUEST['_wp_http_referer'],'is_term') !== false ) {
return true;
} elseif ( isset($_REQUEST['is_term']) && $_REQUEST['is_term'] !== false ) {
return true;
}
return false;
}
// replace Insert Into Post text with something more appropriate
function category_image_replace_text_in_thickbox($translated_text, $source_text, $domain) {
if ( is_category_context() ) {
if ('Insert into Post' == $source_text) {
return __('Use this image', MB_DOM );
}
}
return $translated_text;
}
// output a script that sets variables on the window object so that they can be accessed elsewhere
function category_image_send_to_editor( $html, $id, $attachment ) {
// context check might not be necessary, and, might not work in all cases
if ( is_category_context() ) {
$item = get_post($id);
$src = wp_get_attachment_image_src($id,'thumbnail',true); // 0 = url, 1 = width, 2 = height, 3 = icon(bool)
?>
<script type="text/javascript">
// send image variables back to opener
var win = window.dialogArguments || opener || parent || top;
win.TI.id = <?php echo $id ?>;
win.TI.thumb = '<?php echo $src[0]; ?>';
</script>
<?php
}
return $html;
}
// write out the javascript that handles what happens when a user clicks to use an image
function category_image_send_script() { ?>
<script>
self.TI = {};
var tb_position;
function send_to_editor(h) {
// ignore content returned from media uploader and use variables passed to window instead
jQuery('.tax-image-id').val( self.TI.id );
jQuery('.tax-image-thumb').val( self.TI.thumb );
// display image
jQuery('#taxonomy-image-holder img, #taxonomy-image-remove').remove();
jQuery('#taxonomy-image-holder')
.prepend('<img style="max-width:100%;display:block;" src="'+ self.TI.thumb +'" alt="" />')
.append('<a class="deletion" id="taxonomy-image-remove" href="#remove-image">Remove image</a>');
jQuery('#taxonomy-image-select').html('Change image');
// close thickbox
tb_remove();
}
(function($){
$(document).ready(function() {
tb_position = function() {
var tbWindow = $('#TB_window'), width = $(window).width(), H = $(window).height(), W = ( 720 < width ) ? 720 : width;
if ( tbWindow.size() ) {
tbWindow.width( W - 50 ).height( H - 45 );
$('#TB_iframeContent').width( W - 50 ).height( H - 75 );
tbWindow.css({'margin-left': '-' + parseInt((( W - 50 ) / 2),10) + 'px'});
if ( typeof document.body.style.maxWidth != 'undefined' )
tbWindow.css({'top':'20px','margin-top':'0'});
};
return $('a.thickbox').each( function() {
var href = $(this).attr('href');
if ( ! href ) return;
href = href.replace(/&width=[0-9]+/g, '');
href = href.replace(/&height=[0-9]+/g, '');
$(this).attr( 'href', href + '&width=' + ( W - 80 ) + '&height=' + ( H - 85 ) );
});
};
$(window).resize(function(){ tb_position(); });
$('#taxonomy-image-select').click(function(event){
tb_show("Choose an image:", $(this).attr("href"), false);
return false;
});
$('#taxonomy-image-remove').live('click',function(event){
$('#taxonomy-image-select').html('Choose an image');
$('#taxonomy-image-holder img').remove();
$('input[class^="tax-image"]').val("");
$(this).remove();
return false;
});
});
})(jQuery);
</script>
<?php
}
Доступ к информации
В вашем my_function
бите, взятом из вашего собственного ответа, вы затем получите доступ к метаданным следующим образом:
function my_function(){
$args=array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($args);
// get our category meta data and exit out if there isn't any
$category_meta = get_option('category_meta');
if ( !$category_meta )
return;
echo '<ul style="list-style-type:none;margin:0;padding:0">';
foreach($categories as $category) {
// skip unticked categories & categories with no meta data
if ( !isset( $category_meta[ $category->term_id ] ) || ( isset( $category_meta[ $category->term_id ] ) && !$category_meta[ $category->term_id ]['show_on_home'] ) )
continue;
echo '<li><a style="display:block;margin-top:20px;" href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category_meta[ $category->term_id ]['title'].'</a>';
if ( "" != $category_meta[ $category->term_id ]['image']['id'] )
echo wp_get_attachment_image( $category_meta[ $category->term_id ]['image']['id'], 'category_thumbnail', false, array( 'alt' => $category->name, 'class' => '' ) );
echo $category->description . '</li>';
}
echo '</ul>';
}
Проще всего было бы сделать что-то вроде этого http://wordpress.org/extend/plugins/category-images /. Или вы могли бы написать свой собственный крючок.
Здесь была моя первая попытка...
add_filter( 'the_content', 'cb_category_listing' );
function cb_category_listing( $content )
{
if ( is_home() ) {
$cat_args['title_li'] = '';
$cat_args['exclude_tree'] = 1;
$cat_args['exclude'] = 1;
$myContent = wp_list_categories(apply_filters('widget_categories_args', $cat_args));
$content .= $myContent;
}
return $content;
}
Очевидно, что это просто создает список названий категорий со ссылкой на каждую категорию. Так что это помогает мне начать. Тем не менее, мне все еще нужно...
Средство для связывания уменьшенного изображения категории с каждой категорией и отображения его в списке категорий в моем коде выше.
Средство для включения пользовательского названия категории, помимо названия категории, и отображения его в списке категорий (вместо "Категория Имя")
Средство для отображения/скрытия каждой категории из списка. В идеале, с флажком "Показывать список на главной странице", который можно редактировать на экране редактирования категории.
Вот мой обновленный код. Добираюсь туда, но все еще не разобрался с уменьшенным изображением или добавлением пользовательских полей (уменьшенное изображение, пользовательский заголовок, показать/скрыть) в администраторе редактора категорий...
function _add_my_filter() {
if ( is_home() OR is_sticky() )
{
add_filter( 'the_content', 'my_function' );
}
}
add_action('template_redirect', '_add_my_filter');
function my_function(){
$args=array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($args);
echo '<ul style="list-style-type:none;margin:0;padding:0">';
foreach($categories as $category) {
echo '<li><a style="display:block;margin-top:20px;" href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a>';
echo $category->description . '</li>';
}
echo '</ul>';
}