{"id":40581,"date":"2016-01-21T22:01:33","date_gmt":"2016-01-21T22:01:33","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/sp-random-hello-bar\/"},"modified":"2016-01-22T01:03:11","modified_gmt":"2016-01-22T01:03:11","slug":"sp-random-hello-bar","status":"publish","type":"plugin","link":"https:\/\/pe.wordpress.org\/plugins\/sp-random-hello-bar\/","author":14704573,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.1","stable_tag":"1.0.1","tested":"4.3.34","requires":"3.0","requires_php":"","requires_plugins":"","header_name":"SP Random Hello Bar","header_author":"Brad Denver","header_description":"","assets_banners_color":"616161","last_updated":"2016-01-22 01:03:11","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/sitepoint\/sp-random-hello-bar","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":10,"downloads":1696,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":"1333316","resolution":"128x128","location":"assets"},"icon-256x256.png":{"filename":"icon-256x256.png","revision":"1333316","resolution":"256x256","location":"assets"}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":"1333316","resolution":"1544x500","location":"assets"},"banner-772x250.png":{"filename":"banner-772x250.png","revision":"1333316","resolution":"772x250","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.0.1","0.0.2","0.0.3","1.0.0","1.0.1"],"block_files":[],"assets_screenshots":{"screenshot-4.png":{"filename":"screenshot-4.png","revision":"1539416","resolution":"4","location":"plugin"},"screenshot-2.png":{"filename":"screenshot-2.png","revision":"1539416","resolution":"2","location":"plugin"},"screenshot-3.png":{"filename":"screenshot-3.png","revision":"1539416","resolution":"3","location":"plugin"},"screenshot-1.png":{"filename":"screenshot-1.png","revision":"1539416","resolution":"1","location":"plugin"}},"screenshots":{"1":"Hello Bar in use<\/strong> - An example hello bar being displayed on the Twenty Fifteen theme.","2":"SP Random Hello Bar Submenu<\/strong>","3":"Settings<\/strong> - Quickly enable the hello bar feature and chose what js\/css to enqueue.","4":"Content<\/strong> - Add as many hello bars as you wish."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[321,368,456,702],"plugin_category":[35,45,55],"plugin_contributors":[96291],"plugin_business_model":[],"class_list":["post-40581","plugin","type-plugin","status-publish","hentry","plugin_tags-ads","plugin_tags-advertising","plugin_tags-marketing","plugin_tags-products","plugin_category-advertising","plugin_category-ecommerce","plugin_category-seo-and-marketing","plugin_contributors-sitepointdevs","plugin_committers-sitepointdevs"],"banners":{"banner":"https:\/\/ps.w.org\/sp-random-hello-bar\/assets\/banner-772x250.png?rev=1333316","banner_2x":"https:\/\/ps.w.org\/sp-random-hello-bar\/assets\/banner-1544x500.png?rev=1333316","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/sp-random-hello-bar\/assets\/icon-128x128.png?rev=1333316","icon_2x":"https:\/\/ps.w.org\/sp-random-hello-bar\/assets\/icon-256x256.png?rev=1333316","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/sp-random-hello-bar\/trunk\/screenshot-1.png?rev=1539416","caption":"Hello Bar in use<\/strong> - An example hello bar being displayed on the Twenty Fifteen theme."},{"src":"https:\/\/ps.w.org\/sp-random-hello-bar\/trunk\/screenshot-2.png?rev=1539416","caption":"SP Random Hello Bar Submenu<\/strong>"},{"src":"https:\/\/ps.w.org\/sp-random-hello-bar\/trunk\/screenshot-3.png?rev=1539416","caption":"Settings<\/strong> - Quickly enable the hello bar feature and chose what js\/css to enqueue."},{"src":"https:\/\/ps.w.org\/sp-random-hello-bar\/trunk\/screenshot-4.png?rev=1539416","caption":"Content<\/strong> - Add as many hello bars as you wish."}],"raw_content":"\n

As descibed in-depth on SitePoint<\/a> a hello bar is a thin bar of content that slides into view once the user scrolls past a set point on a page.\nThe message content is up to you, but is ideal for advertising, product annoncements or other messages.<\/p>\n\n

This plugin provides an admin interface to create multiple hello bar messages that can then be randomly displayed on user facing pages.<\/p>\n\n

By setting weightings for each message you can determine how often each is displayed. On each page load a message is randomly selected\n(respecting the weightings given). A random number is generated client side before fetching the message content to ensure it is compatible\nwith caching services such as W3 Total Cache.<\/p>\n\n

All the required javascript and css is included in the plugin and can be set to enqueue via settings.\nAlternatively you can roll your own. To help with that the core javascript has been extracted into the sp-hello-bar<\/a>\nnpm module for you to include in your own scripts.<\/p>\n\n\n

    \n
  1. Upload the entire \/sp-random-hello-bar\/<\/code> folder to the \/wp-content\/plugins\/<\/code> directory.<\/li>\n
  2. Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n
  3. Navigate to the SP Random Hello Bar<\/strong> section of the Settings<\/em> menu. At example.com<\/code> this page would be found at http:\/\/example.com\/wp-admin\/options-general.php?page=sp-random-hello-bar<\/code>.<\/li>\n
  4. Enable the hello bar to display in pages.<\/li>\n
  5. Select which javascript, if any, you would like to enqueue.<\/li>\n
  6. Select if you would like to enqueue basic css styles fror the hello bar.<\/li>\n
  7. Enter content for one or more hello bars and set a weighting.<\/li>\n<\/ol>\n\n\n
    \n
    Can I use the javascript module without npm?<\/dt>\n

    Sure. The plugin contains the SpHelloBar source as an ES6 Module at src\/js\/SpHelloBar.js<\/code> and as a common.js module at lib\/SpHelloBar.js<\/code>.<\/p><\/dd>\n

    Does the javascript require other libraries such as jQuery to function?<\/dt>\n

    The SpHelloBar module does not have any external dependencies but it would then be up to you to provide a throttle function and to load the hello bar content into the page (usually via ajax).\nHowever the Basic and Basic with storage scripts assume that jquery and underscore have been enqueued. Those two libraries are enqueued in the default setup of WordPress unless you have dequeued them.<\/p><\/dd>\n

    Can I customise the content?<\/dt>\n

    Go for it. The basic scripts assume the default css class names are being used but the only one that is required is .SpHelloBar<\/code>.\nThe javascript has been designed to be as flexible as possible so see the docs<\/a> for all the options that can be overridden\nwhen writing your own script.<\/p><\/dd>\n

    How did you build something so wonderful?<\/dt>\n

    I'm glad you asked. You can read about how it was put together on SitePoint<\/a>.<\/p><\/dd>\n\n<\/dl>\n\n\n

    0.0.1<\/h4>\n\n
      \n
    • Submitted to WordPress for approval<\/li>\n<\/ul>\n\n

      0.0.2<\/h4>\n\n
        \n
      • Added assets<\/li>\n<\/ul>\n\n

        1.0.0<\/h4>\n\n
          \n
        • Ready for use<\/li>\n<\/ul>","raw_excerpt":"Randomly (with weighting) shows a hello bar message on page scroll.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/40581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=40581"}],"author":[{"embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/sitepointdevs"}],"wp:attachment":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=40581"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=40581"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=40581"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=40581"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=40581"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=40581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}