希望：更换新闻展示方式 变成 左边图片 右边文字
这个是：
最像的：
具体效果参考：
最好不要完全一样
但是是左右结构的
记得之前调试底部menu时，display 不是inline，好像就列表显示了？
去调试看看
此处的图片和内容 是两个div：
而调试了半天，好像也没有找到，如何让这两个div左右布局的
后来发现别人的是ul和多个li：
-》所以好像必须要去改php中的html了
才方便实现，左右布局的
但是现在又不方便直接去改内部php的html，因为这个属于Post Grid：
另外的主页也用到了：
如果改了，两个都会变样。
后来想起来了：
本来要去参考：
但是本地是空的内容：
是有问题，打算Mac中用MAMP重新安装一次，看看blog页面是否有内容，供参考。
看了下在线的，是：
多个post_item section的div列出了的，整个列宽是3/4的col span_3_of_4
猜想，或许可以通过：
参考这个blog的布局，
然后再加上csss布局的调整去让这里的post变成左图右字
然后防止别的页面布局也变化，或许加上额外的css，然后再去设置csss的值，或许就可以单独针对下面的这些post去布局，而不影响别的地方了。
所以先去本地MAMP中重新倒入，参考blog页面
但是要重新安装：
【已解决】通过重置重新安装Wordpress
结果重装后的Fortuna的blog，依旧是空的：
怀疑是Fortuna主题的版本问题
所以搜：
fortuna wordpress
fortuna wordpress download
Docs
-》最新的貌似是
Version 2.10 (19 Feb. 2018)
-》
-》
待会用最新版本的2.10的Fortuna，再去试试，看看是否Blog页面是否有内容供参考
结果也没有。
无意间发现：
通过作者过滤，进入了：
所有post：
而post的列表，就是之前的blog的页面的布局
就是我们要的
-》换句话说：单独进去post的列表的blog，就是我们要的blog页面的布局
所以，可以去：
针对于post carousel去改造，看看能否左右布局
然后想要参考之前已有公司新闻，利用到了post carousel的页面的源码呢
结果新建页面时发现，可以从template中选择
而且发现了个 article list，或许接近我们要的效果，去试试
好像不是我们要的
“Activate WPBakery Page Builder
WPBakery Page Builder Template Library downloads are available for activated versions only. Activate WPBakery Page Builder direct license to access Template Library and receive other benefits.”
要购买才能用
倒是很像我们要的。
不过不管了，自己去新建就好。
去文本模式粘贴：
[vc_row full_width="stretch_row" bg_type="image" parallax_style="vcpb-vz-jquery" bg_image_new="24816" bg_image_repeat="no-repeat" parallax_sense="50" disable_on_mobile_img_parallax="off" parallax_content="parallax_content_value" parallax_content_sense="70" fadeout_row="fadeout_row_value" fadeout_start_effect="50" enable_overlay="enable_overlay_value" overlay_color="rgba(12,13,13,0.5)" overlay_pattern="transperant" overlay_pattern_opacity="0" seperator_enable="off" css=".vc_custom_1522223657496{margin-bottom: 0px !important;padding-top: 250px !important;padding-bottom: 160px !important;}"][vc_column][boc_heading html_element="h1" alignment="center" color="#ffffff" font_size="52px"]公司新闻[/boc_heading][boc_divider divider_width="100px" divider_position="center" divider_color="rgba(255,255,255,0.3)" margin_top="24px" margin_bottom="30px"][/vc_column][/vc_row][vc_row bg_type="bg_color" seperator_enable="off"][vc_column][boc_spacing height="70px"][boc_post_grid limit="3" css_items_animation="bottom-to-top" is_boxed="yes" show_date="2" show_excerpt="yes" excerpt_char_limit="80" show_read_more="yes" read_more_style="1" img_hover_effect="4"][/vc_column][/vc_row]
切换到Backend Editor模式，即可：
效果：
然后再去修改：
fortuna的post carousel的php中html的源码去
此处是去修改post grid
/Users/crifan/dev/dev_root/crifan.org/mamp/wordpress/wp-content/themes/fortuna/includes/shortcodes/vc/boc_post_grid.php
先去参考别的布局：
需要借鉴其中的：
通过对比，然后慢慢修改，仅仅是通过：
$str .='<div class="col span_3_of_4"> <div class="post_item section">';
（再去重启服务器：
本地的MAMP的停止/启动服务器
）
就可以变成每一行的布局了：
所以接着继续去尝试
// If image isset
if($feat_img){
$str .='<div class="post_list_left">
<div class="pic '.esc_attr($img_hover_effect).'"><a href="'. get_permalink().'"><img src="'.esc_url($feat_img).'"/><div class="img_overlay"><span class="hover_icon icon_plus"></span></div></a></div>
</div>';
}
$str .= '<div class="post_list_right">';
然后至少可以变成左右的了，虽然左边图片很小：
再去通过调试css，发现：
.post_list_left的width可以控制左边图片的宽度
再去改为：
// If image isset
if($feat_img){
$str .='<div class="post_list_left_img">
<div class="pic '.esc_attr($img_hover_effect).'"><a href="'. get_permalink().'"><img src="'.esc_url($feat_img).'"/><div class="img_overlay"><span class="hover_icon icon_plus"></span></div></a></div>
</div>';
}
}
$str .= '<div class="post_list_right_info">';
以及加上自定义的css：
.post_list_left_img {
float: left;
text-align: center;
width: 400px;
/* margin-top: 28px; */
}
.post_list_right_info {
margin-left: 420px;
/* padding-top: 24px; */
}
基本上就是要的效果了：
然后放到在线的环境上，效果是：
【总结】
最后是：
修改了post grid的源码：
wordpress/wp-content/themes/fortuna/includes/shortcodes/vc/boc_post_grid.php
相关改动为：
$str .= '<div id = "post_grid_'. $grid_id .'" class="grid_holder '.($css_items_animation ? "animated_items" : "").'">
<div class="col span_4_of_4">’;
$short_excerpt = boc_limitString($excerpt,$excerpt_char_limit);
$str .='<div class="post_item section">';
$id = $wp_query->post->ID;
// If image isset
if($feat_img){
$str .='<div class="post_list_left_img">
<div class="pic '.esc_attr($img_hover_effect).'"><a href="'. get_permalink().'"><img src="'.esc_url($feat_img).'"/><div class="img_overlay"><span class="hover_icon icon_plus"></span></div></a></div>
</div>';
}
$str .= '<div class="post_list_right_info">';
$str .=' </div>
</div>';
endwhile; // close the Loop
wp_reset_postdata();
$str.='
</div>
</div>
<div class="h10 clear"></div>';
且加上自定义css：
.post_list_left_img {
float: left;
text-align: center;
width: 400px;
/* margin-top: 28px; */
}
.post_list_right_info {
margin-left: 420px;
/* padding-top: 24px; */
}
然后就可以，达到，左边图片，右边内容的效果了：
