本站主题第一版曾经推出过一个天气功能，在发布文章的时候选择当天的天气，然后发布文章后在前端显示出来。现在回想起来，这个功能可以无限拓展，大家可以根据我的代码举一反三，人狠话不多，直接上代码，还是老样子，折腾你的 Function.php 文件吧。
PHP
// 添加天气在编辑器侧边栏
function custom_meta_box_markup( $object ) {
wp_nonce_field( basename( __FILE__ ), “meta-box-nonce” );
?>
<label for=”post_weather”>天气：</label>
<select name=”post_weather”>
<?php
$option_values = array( Sunny, Rain, Wind, Snow, Lightning, Cloudy );
foreach ( $option_values as $key => $value ) {
if ( $value == get_post_meta( $object->ID, “post_weather”, true ) ) {
?>
<option selected><?php echo $value; ?></option>
<?php
} else {
?>
<option><?php echo $value; ?></option>
<?php
}
}
?>
</select>
<?php
}
添加天气下拉菜单：
PHP
//显示下拉天气
function add_custom_meta_box() {
add_meta_box( “demo-meta-box”, “选择天气”, “custom_meta_box_markup”, “post”, “normal”, “high”, null );
}
add_action( “add_meta_boxes”, “add_custom_meta_box” );
function save_custom_meta_box( $post_id, $post, $update ) {
if ( !isset( $_POST[ “meta-box-nonce” ] ) || !wp_verify_nonce( $_POST[ “meta-box-nonce” ], basename( __FILE__ ) ) )
return $post_id;
if ( !current_user_can( “edit_post”, $post_id ) )
return $post_id;
if ( defined( “DOING_AUTOSAVE” ) && DOING_AUTOSAVE )
return $post_id;
$slug = “post”;
if ( $slug != $post->post_type )
return $post_id;
$meta_box_dropdown_value = “”;
if ( isset( $_POST[ “post_weather” ] ) ) {
$meta_box_dropdown_value = $_POST[ “post_weather” ];
}
update_post_meta( $post_id, “post_weather”, $meta_box_dropdown_value );
}
add_action( “save_post”, “save_custom_meta_box”, 10, 3 );
前端显示天气 ICon
PHP
//显示天气 Icon
function post_weather() {
$post_weather = esc_attr( get_post_meta( get_the_ID(), ‘post_weather’, true ) );
if ( $post_weather == “” ) {
echo ‘<svg style=”width:24px;height:24px” viewBox=”0 0 24 24″>
<path fill=”orange” d=”M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z” />
</svg>’;
} elseif ( $post_weather == Sunny ) {
echo ‘<svg style=”width:24px;height:24px” viewBox=”0 0 24 24″>
<path fill=”orange” d=”M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z” />
</svg>’;
} elseif ( $post_weather == Rain ) {
echo ‘<svg style=”width:24px;height:24px” viewBox=”0 0 24 24″>
<path fill=”currentColor” d=”M9,12C9.53,12.14 9.85,12.69 9.71,13.22L8.41,18.05C8.27,18.59 7.72,18.9 7.19,18.76C6.65,18.62 6.34,18.07 6.5,17.54L7.78,12.71C7.92,12.17 8.47,11.86 9,12M13,12C13.53,12.14 13.85,12.69 13.71,13.22L11.64,20.95C11.5,21.5 10.95,21.8 10.41,21.66C9.88,21.5 9.56,20.97 9.7,20.43L11.78,12.71C11.92,12.17 12.47,11.86 13,12M17,12C17.53,12.14 17.85,12.69 17.71,13.22L16.41,18.05C16.27,18.59 15.72,18.9 15.19,18.76C14.65,18.62 14.34,18.07 14.5,17.54L15.78,12.71C15.92,12.17 16.47,11.86 17,12M17,10V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11C3,12.11 3.6,13.08 4.5,13.6V13.59C5,13.87 5.14,14.5 4.87,14.96C4.59,15.43 4,15.6 3.5,15.32V15.33C2,14.47 1,12.85 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12C23,13.5 22.2,14.77 21,15.46V15.46C20.5,15.73 19.91,15.57 19.63,15.09C19.36,14.61 19.5,14 20,13.72V13.73C20.6,13.39 21,12.74 21,12A2,2 0 0,0 19,10H17Z” />
</svg>’;
} elseif ( $post_weather == Snow ) {
echo ‘<svg style=”width:24px;height:24px” viewBox=”0 0 24 24″>
<path fill=”currentColor” d=”M6,14A1,1 0 0,1 7,15A1,1 0 0,1 6,16A5,5 0 0,1 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16H18A1,1 0 0,1 17,15A1,1 0 0,1 18,14H19A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11A3,3 0 0,0 6,14M7.88,18.07L10.07,17.5L8.46,15.88C8.07,15.5 8.07,14.86 8.46,14.46C8.85,14.07 9.5,14.07 9.88,14.46L11.5,16.07L12.07,13.88C12.21,13.34 12.76,13.03 13.29,13.17C13.83,13.31 14.14,13.86 14,14.4L13.41,16.59L15.6,16C16.14,15.86 16.69,16.17 16.83,16.71C16.97,17.24 16.66,17.79 16.12,17.93L13.93,18.5L15.54,20.12C15.93,20.5 15.93,21.15 15.54,21.54C15.15,21.93 14.5,21.93 14.12,21.54L12.5,19.93L11.93,22.12C11.79,22.66 11.24,22.97 10.71,22.83C10.17,22.69 9.86,22.14 10,21.6L10.59,19.41L8.4,20C7.86,20.14 7.31,19.83 7.17,19.29C7.03,18.76 7.34,18.21 7.88,18.07Z” />
</svg>’;
} elseif ( $post_weather == Wind ) {
echo ‘<svg style=”width:24px;height:24px” viewBox=”0 0 24 24″>
<path fill=”currentColor” d=”M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z” />
</svg>’;
} elseif ( $post_weather == Lightning ) {
echo ‘<svg style=”width:24px;height:24px” viewBox=”0 0 24 24″>
<path fill=”currentColor” d=”M6,16A5,5 0 0,1 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16H18A1,1 0 0,1 17,15A1,1 0 0,1 18,14H19A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11A3,3 0 0,0 6,14H7A1,1 0 0,1 8,15A1,1 0 0,1 7,16H6M12,11H15L13,15H15L11.25,22L12,17H9.5L12,11Z” />
</svg>’;
} elseif ( $post_weather == Cloudy ) {
echo ‘<svg style=”width:24px;height:24px” viewBox=”0 0 24 24″>
<path fill=”currentColor” d=”M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13Z” />
</svg>’;
}
}
因为调用的全部是代码生成的 svg 图像，所以不必要再为了图像发愁，当然，如果你想换掉自己喜欢的图片，请根据代码自行修改调整。
这段代码我参考了很多资料自己实践写出来，大家可以根据实际进行拓展，我也会继续自学，开发出好的功能我会继续发布给大家参考，一起努力学习！
Author Box
注册：Jan 30, 2021
简介：技术菜鸟，拷贝、黏贴代码中 ……
