|
|
<b>[文章目录]</b>
<ul id="index-ul">
<li>第一步：在网站的后台安装这款插件 Featured Image Column 然后启用即可</li>
<li>第二步：添加文章列表中没有设置特色图像的默认显示图片</li>
<li>第三步：为这个默认的特色图像添加宽度和高度，也就是显示的大小</li>
<li>第四步:为样式添加代码</li>
</ul>
</div>
同学们大家好，今天<span style="color: #ff0000;"><strong>吾爱互联</strong></span>将与大家分享一款插件实现网站后台文章列表管理位置添加特色图像功能 这个功能的实现的好处就是在于在网站后台可以清晰看到每篇文章所设置的特色图像，方便预览！这个就需要一款插件来实现再配合少量代码 就可以完美制作完成 那我们就先来看下效果图 如图之前默认的 <img class="aligncenter size-full wp-image-1011" src="http://www.wpjiaocheng.com/wp-content/uploads/2014/09/默认没有添加管理文章列表前特设图像功能.jpg" alt="【插件分享】wordpress中后台文章列表管理位置显示特色图像功能" width="412" height="276" /> 如图安装插件之后的 <img class="aligncenter size-full wp-image-1012" src="http://www.wpjiaocheng.com/wp-content/uploads/2014/09/管理文章列表添加后的特设图像功能.jpg" alt="【插件分享】wordpress中后台文章列表管理位置显示特色图像功能" width="441" height="346" /> 好了，到现在还没有说出这个插件的名字，它就是 Featured Image Column 可以在线搜索安装即可 具体就制作方法为以下几步：
<h2 id="title-0">第一步：在网站的后台安装这款插件 Featured Image Column 然后启用即可
如果文章是没有设置特色图像，就会在文章列表管理位置出现空白的图像框，反之则会出现设置的特色图像
<h2 id="title-1">第二步：添加文章列表中没有设置特色图像的默认显示图片
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><span class="comment">//添加文章管理列表特色图像</span></li>
<li></li>
<li class="alt"><span class="keyword">function</span> my_custom_featured_image_column_image( <span class="vars">$image</span> ) {</li>
<li><span class="keyword">if</span> ( !has_post_thumbnail() )</li>
<li class="alt"><span class="keyword">return</span> trailingslashit( get_stylesheet_directory_uri() ) . 'images/featured-image.png';</li>
<li>}</li>
<li class="alt">add_filter( 'featured_image_column_default_image', 'my_custom_featured_image_column_image' );</li>
</ol>
</div>
选择一个图片命名为 featured-image.png 放到images下即可，这个功能就是说在文章里没有设置特色图像的时候就默认显示这个图片
<h2 id="title-2">第三步：为这个默认的特色图像添加宽度和高度，也就是显示的大小
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><span class="comment">//调整特设图像的图片大小样式</span></li>
<li></li>
<li class="alt"><span class="comment">/**</span></li>
<li><span class="comment">* @use '.featured-image.column-featured-image img {}'</span></li>
<li class="alt"><span class="comment">*/</span></li>
<li><span class="keyword">function</span> my_custom_featured_image_css() {</li>
<li class="alt"><span class="keyword">return</span> trailingslashit( get_stylesheet_directory_uri() ) . 'css/featured-image.css';</li>
<li>}</li>
<li class="alt">add_filter( 'featured_image_column_css', 'my_custom_featured_image_css' );</li>
</ol>
</div>
这需要添加一个新式命名为 featured-image.css 放到css下面即可
<h2 id="title-3">第四步:为样式添加代码
<div class="dp-highlighter">
<ol class="dp-c" start="1">
<li class="alt">th#featured-image,</li>
<li>td.featured-image.column-featured-image {</li>
<li class="alt">max-height: 50px;</li>
<li>max-width: 50px;</li>
<li class="alt">width: 50px;</li>
<li>}</li>
<li class="alt">.featured-image.column-featured-image img {</li>
<li>max-height: 42px;</li>
<li class="alt">max-width: 46px;</li>
<li>-ms-interpolation-mode: bicubic;</li>
<li class="alt">}</li>
</ol>
</div>
将这个样式放到 featured-image.css 即可，这里的样式自己可以定义图像的大小，好吧 注意点：第二，三步里中的代码要添加到functions.php文件里，明白 好了，这样插件配合少量代码就可以实现比较完美的文章列表管理位置前的特色图像预览功能了，看下是不是很不错呢，尝试下吧
|
|
发表于 2015-4-20 15:49:41
