我需要你提供以下主题的帮助。
http://www.korevolution.com/risorse-gratuite/free-wp-theme/koresponsive/
我想更改索引页面上图像的大小以及每个帖子上图像的大小。
我在functions.php和stylesheet.css上找到了以下代码,只是编辑它就不够了。
Functions.php code
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ) );
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 314, 200, true );
add_image_size( 'related', 50, 50, true );
add_image_size( 'home_img', 314, 200, true );
add_image_size( 'single_img', 600, 300, true );
add_image_size( 'page_img', 920, 350, true );
add_image_size( 'slider_img', 600, 280, true );
Stylesheet.css code
.img-home, .feat-thumb a
max-width: 314px;
max-height: 200px;
display: inline-block;
.img-single, .feat-thumb-s a
max-width: 600px;
max-height: 300px;
display: inline-block;
有什么想法吗?
答案 0 :(得分:0)
您可以通过WordPress的图像编辑器&更改图像的大小。设置。一旦你完成了,你的CSS应该工作
转到Wordpress媒体库(your_website.com/wp-admin/upload.php)编辑上传的图像文件
您可以在此处找到WordPress image settings help
答案 1 :(得分:0)
更改CSS应该这样做...当我将max-width
.feat-thumb a
属性的值更改为Chrome中较小的值时,我会看到它按预期调整大小。您可能没有正确编辑它(例如,您可能没有设置服务器端文件权限以保存通过Wordpress管理面板对模板进行的编辑 - 请尝试FTP),或者您可能看到缓存的样式表并需要清除浏览器的缓存加载更新的样式表。
add_image_size()
functions.php
home_img
single_img
width: 100%
中的max-width: 100%
引用仅在首次上传图片时使用,因此不具有追溯力,以便更新上传的图片以前你需要使用一个插件 - 我喜欢这个:AJAX Thumbnail Rebuild
但是,在响应式主题中,图像通常设置为.feat-thumb a
或img
(在本例中为后者)并且取决于其父容器的大小,或者在某些情况下更远祖先容器,这就是为什么要更新img
的CSS值的原因,add_image_size()
是包裹add_image_size()
而不是!important
的锚元素,因此在很多情况下只更新{{1}如果没有CSS调整也是不够的(实际上,更改body .feat-thumb a
的调用无关紧要,因为无论实际大小如何,响应式设计中的图像通常不会超过宽度的100%他们的小容器。)
如果您确定正在应用/加载CSS更新(例如,您可以在浏览器中从服务器检查它并且它不是文件权限或缓存问题),您可以尝试将.feat-thumb a
添加到结尾样式(草率)或将它们复制并粘贴到样式表的末尾,并将另一个元素添加到选择器链中以确保它们具有更高的特异性(例如{{1}}而不是{{1}})。但是我怀疑你还有其他一些问题,因为正如我所说,当我直接在Chrome中修改CSS时,我可以在前端看到结果。