我们如何定制欢迎屏幕上的徽标和一些文本?

时间:2012-07-03 作者:marikamitsos

我找到了隐藏或删除最近引入的Welcome screen.

但我们确实发现,作为一个整体,屏幕非常有用,是一个极好的补充。因此,我们正在寻找的是完全不同的。

我们只是想change parts of it on a multisite/subfolders network.

准确地说。左侧的wp徽标图像(wp badge.png),以及其旁边的标题(欢迎面板内容。关于描述,.欢迎面板h3)及其下的文本(关于文本,.关于描述,.关于包装li.wp-person a.web)。

Proposed Welcome Panel

我知道大部分都是硬编码的。还一定有办法。:)

附:1)我们已经使用了一个插件,可以在管理屏幕上添加css。但我不认为这能解决任何问题。2) 如果有办法,请尽可能具体/描述性。我的编码技能很差:(

按照brasofilo的指示进行更新后,我将代码编译为mu插件。我把它放在我们的mu插件文件夹中,在我们的测试多站点上进行了测试,效果很好。:)

我已经把它上传到我的dropbox,这样任何人都可以受益。请随意Right Click Here, 下载并根据您的需要进行定制。我希望它也能帮助其他人。

附言:@brasofilo请让我知道我是否正确地记下了它。

1 个回复
最合适的回答,由SO网友:brasofilo 整理而成

每当我们发现自己处于“必须有办法克服这一硬代码”的情况下,jQuery就会出手相救。。。

结果

enter image description here

代码

以下代码必须粘贴在活动主题的末尾functions.php 文件
或者可以在custom plugin, 这将使代码“主题独立”。

add_action(\'admin_head-index.php\', \'wpse_57350_script_enqueuer\');

function wpse_57350_script_enqueuer()
{
    // Check if Welcome Panel is being displayed
    $option = get_user_meta( get_current_user_id(), \'show_welcome_panel\', true );
    if( !$option )
        return;
    ?>
    <style type="text/css">
        /*
         * Hide the Welcome Panel and the "dismiss" message at the bottom
         */ 
        #welcome-panel {opacity:0.01;} 
        p.welcome-panel-dismiss {display:none}
    </style>
    <script type="text/javascript">
    jQuery(document).ready( function($) 
    {
        /*
         * Left side image and text
         * - changing CSS properties and raw Html content of the Div
         */
        $(\'div.wp-badge\').css(\'background-image\',\'url(http://lifelabsnewyork.com/sitebuilder/images/brain-filled-173x192.jpg)\');
        $(\'div.wp-badge\').css(\'color\',\'#000000\');
        $(\'div.wp-badge\').html(\'Custom Welcome\');

        // Right side H3 (change raw Html content)
        $(\'div.welcome-panel-content h3\').html(\'By StackExchange WordPress Answers\');

        // Right side paragraph (idem)
        $(\'p.about-description\').html(\'To be exact. The wp logo image (wp-badge.png) on the left, as well as the header next to it (.welcome-panel-content .about-description, .welcome-panel h3) and the text under it included in (.about-text, .about-description, .about-wrap li.wp-person a.web).\');

        /*
         * Everything modified, fade in the whole Div
         * The fade in effect can be removed deleting this and the CSS opacity property
         */
        $(\'#welcome-panel\').delay(300).fadeTo(\'slow\',1);
    });     
    </script>
    <?php
}
请注意,我很懒惰,直接在管理标题中打印样式和脚本
请参考以下问题;A关于如何以适当/正式的方式进行
How do I enqueue styles/scripts on certain /wp-admin pages?
Where is the right place to register/enqueue scripts & styles

结束

相关推荐

Profile Field In Admin Bar

我在用户配置文件中添加了一个名为“当前状态”的字段,用户在其中填写自己的信息,如电子邮件、网站等。如何使此字段仅显示给作者,并将其显示在管理员/作者栏中,以便他们无需进入配置文件区域即可进行更新?提前感谢!