为无LOGO的wordpress主题添加LOGO的方法
文章类别:
- 9月 19, 2022
- 0 条评论
(0 次顶, 0 人已投票)
你必须注册后才能投票!
你必须注册后才能投票!
Loading...
快捷索引
简单方法:
1.将自己制作好的logo图片复制黏贴到\wordpress\wp-content hemes wentyeleven目录下面,记住你logo图片的名称。
2.用相关软件打开 \wordpress\wp-content hemes wentyeleven目录下的header.php文件,找到
<h1 id=”site-title”><span><a
href=”<?php echo esc_url( home_url(
‘/’ ) ); ?>” title=”<?php echo
esc_attr( get_bloginfo( ‘name’,
‘display’ ) ); ?>”
rel=”home”>这一句,在后面添加代码<img src=”<?php
bloginfo(‘template_directory’);
?>/logo名称.jpg” alt=”<?php bloginfo(
‘name’ ); ?>” width=”180″
height=”96″/>,将后面这句<?php bloginfo(
‘name’ ); ?>去掉就可以。
刷新页面就可以显示了,因为wordpress3.2.1默认的header图片是100%显示,所以上传的logo可能会以100%显示,剩下的工作需要你在css里面调试了,不再赘述。
给主题添加后台上传网站LOGO的功能
1. 切换到主题所在目录,打开functions.php文件,添加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | class ClassicOptions { function getOptions() { $options = get_option(‘classic_options’); if (!is_array($options)) { $options[‘ashu_logo’] = ”; update_option(‘classic_options’, $options); } return $options; } function init() { if(isset($_POST[‘classic_save’])) { $options = ClassicOptions::getOptions(); $options[‘ashu_logo’] = stripslashes($_POST[‘ashu_logo’]); update_option(‘classic_options’, $options); } else { ClassicOptions::getOptions(); } add_theme_page(“主题设置”, “主题设置”, ‘edit_themes’, basename(__FILE__), array(‘ClassicOptions’, ‘display’)); } function display() { $options = ClassicOptions::getOptions(); ?> <form method=“post” enctype=“multipart/form-data” name=“classic_form” id=“classic_form”> <div class=“wrap”> <h2><?php _e(‘主题设置’); ?></h2> <p> <label> <input type=“text” size=“80” name=“ashu_logo” id=“ashu_logo” value=“<?php echo($options[‘ashu_logo’]); ?>“/> <input type=“button” name=“upload_button” value=“上传” id=“upbottom”/> </label> </p> <p class=“submit”> <input type=“submit” name=“classic_save” value=“<?php _e(‘保存设置’); ?>“ /> </p> </div> </form> <?php } } add_action(‘admin_menu’, array(‘ClassicOptions’, ‘init’)); wp_enqueue_script(‘my-upload’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/upload.js’); //加载上传图片的js(wp自带) wp_enqueue_script(‘thickbox’); //加载css(wp自带) wp_enqueue_style(‘thickbox’); |
2. 新建upload.js,放入主题的js文件夹中,主题中没有js文件夹请新建,添加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | jQuery(document).ready(function() { //upbottom为上传按钮的id jQuery(‘#upbottom’).click(function() { //ashu_logo为文本域 targetfield = jQuery(this).prev(‘#ashu_logo’); tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’); return false; }); window.send_to_editor = function(html) { imgurl = jQuery(‘img’,html).attr(‘src’); jQuery(targetfield).val(imgurl); tb_remove(); } }); |
3. 在后台上传网站logo,效果如下图:
4. 在前台显示此LOGO,打开header.php,在需要显示的地方,添加如下代码:
1 2 3 4 5 | <?php $logo=get_option(‘classic_options’); $logo_url=$logo[‘ashu_logo’]; ?> <img src=“<?php echo $logo_url;?>“ alt=“” /> |
同类文章
标签: WordPress
文章类别:
本文链接: http://www.books51.com/164.html
【点击下方链接,复制 & 分享文章网址】
为无LOGO的wordpress主题添加LOGO的方法 → http://www.books51.com/164.html |
上一篇: 增添本文链接的简单方法(无需wordpress插件)
(0 次顶, 0 人已投票)
你必须注册后才能投票!
你必须注册后才能投票!
Loading...
最新评论