{"id":246652,"date":"2025-08-23T03:39:23","date_gmt":"2025-08-23T03:39:23","guid":{"rendered":"https:\/\/ja.wordpress.org\/plugins\/copy-code-button\/"},"modified":"2026-03-20T13:33:53","modified_gmt":"2026-03-20T13:33:53","slug":"stick-copy-button-codeblock","status":"publish","type":"plugin","link":"https:\/\/sna.wordpress.org\/plugins\/stick-copy-button-codeblock\/","author":23346985,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.5.1","stable_tag":"1.5.1","tested":"6.9.4","requires":"5.0","requires_php":"7.4","requires_plugins":null,"header_name":"Sticky Copy Button for Code Blocks","header_author":"Kasuga","header_description":"This plugin adds a convenient copy button to every code block on your blog posts. Customize the button's position, labels, size, and colors from a dedicated settings page to match your site's design.","assets_banners_color":"f6f4ef","last_updated":"2026-03-20 13:33:53","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.paypal.me\/kasuga16","header_plugin_uri":"","header_author_uri":"","rating":4,"author_block_rating":0,"active_installs":30,"downloads":697,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"kasuga16","date":"2025-08-24 11:40:00"},"1.0.1":{"tag":"1.0.1","author":"kasuga16","date":"2025-10-01 13:22:36"},"1.1.0":{"tag":"1.1.0","author":"kasuga16","date":"2025-11-16 11:07:29"},"1.2.0":{"tag":"1.2.0","author":"kasuga16","date":"2025-11-25 03:10:28"},"1.4.0":{"tag":"1.4.0","author":"kasuga16","date":"2026-01-23 07:47:56"},"1.5.0":{"tag":"1.5.0","author":"kasuga16","date":"2026-02-18 11:07:35"},"1.5.1":{"tag":"1.5.1","author":"kasuga16","date":"2026-03-20 13:33:53"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":1,"5":0},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3348849,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3348849,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544\u00d7500.png":{"filename":"banner-1544\u00d7500.png","revision":3348849,"resolution":"1544x500","location":"assets","locale":""},"banner-772\u00d7250.png":{"filename":"banner-772\u00d7250.png","revision":3348849,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.1.0","1.2.0","1.4.0","1.5.0","1.5.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3350134,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3350134,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3487221,"resolution":"3","location":"plugin"}},"screenshots":{"1":"Plugin settings screen","2":"Button display in an actual blog post","3":"Line numbers displayed on a code block."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[485,1214,2738,1381,251892],"plugin_category":[],"plugin_contributors":[246687],"plugin_business_model":[],"class_list":["post-246652","plugin","type-plugin","status-publish","hentry","plugin_tags-button","plugin_tags-code","plugin_tags-copy","plugin_tags-easy","plugin_tags-line-numbers","plugin_contributors-kasuga16","plugin_committers-kasuga16"],"banners":{"banner":"https:\/\/ps.w.org\/stick-copy-button-codeblock\/assets\/banner-772\u00d7250.png?rev=3348849","banner_2x":"https:\/\/ps.w.org\/stick-copy-button-codeblock\/assets\/banner-1544\u00d7500.png?rev=3348849","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/stick-copy-button-codeblock\/assets\/icon-128x128.png?rev=3348849","icon_2x":"https:\/\/ps.w.org\/stick-copy-button-codeblock\/assets\/icon-256x256.png?rev=3348849","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/stick-copy-button-codeblock\/assets\/screenshot-1.png?rev=3350134","caption":"Plugin settings screen"},{"src":"https:\/\/ps.w.org\/stick-copy-button-codeblock\/assets\/screenshot-2.png?rev=3350134","caption":"Button display in an actual blog post"},{"src":"https:\/\/ps.w.org\/stick-copy-button-codeblock\/trunk\/screenshot-3.png?rev=3487221","caption":"Line numbers displayed on a code block."}],"raw_content":"\n

Sticky Copy Button for Code Blocks<\/strong> automatically adds a floating copy button to each <pre><code><\/code> block on your website.\nIt provides convenient front-end copying for developers, readers, and tutorial users.<\/p>\n\n

Features<\/h3>\n\n

This plugin is light, fast, and highly customizable:<\/p>\n\n

    \n
  • Adjustable button position (up\/down and left\/right)<\/li>\n
  • Customizable labels (\u201cCopy\u201d \/ \u201cCopied\u201d)<\/li>\n
  • Adjustable font size<\/li>\n
  • Background color, text color, or transparent mode<\/li>\n
  • Max-height option for large code blocks (with scroll support)<\/li>\n
  • Optional line numbers<\/strong> (simple native implementation)<\/li>\n
  • Custom CSS that is safely sanitized<\/li>\n<\/ul>\n\n

    No dependencies such as Prism or Highlight.js are required.<\/p>\n\n

    Detailed Settings Guide<\/h3>\n\n

    The following explains every option<\/strong> in the plugin settings page.<\/p>\n\n\n\n

    1. Button Position<\/strong><\/h3>\n\n

    Adjust vertical position (top offset in px)<\/strong>
    \nMoves the button up or down relative to the top of the code block.\nUse positive or negative values to fine-tune vertical alignment.<\/p>\n\n

    Adjust horizontal position (right offset in px)<\/strong>
    \nMoves the button left or right by adjusting how far it sits from the right edge of the code block.\nUse positive or negative values to fine-tune horizontal alignment.<\/p>\n\n

    These values help fine-tune button alignment to avoid overlapping with theme elements.<\/p>\n\n\n\n

    2. Button Text and Behavior<\/strong><\/h3>\n\n

    Copy button label<\/strong>
    \nThe label shown normally (default: \u201cCopy\u201d).<\/p>\n\n

    Label after copying (2 seconds)<\/strong>\nOnce the text is copied, the button temporarily displays this label.\nDefault: \u201cCopied\u201d.<\/p>\n\n\n\n

    3. Button Size<\/strong><\/h3>\n\n

    Button size (8\u201336 px)<\/strong>\nControls the font size of the button.\nPadding is automatically adjusted based on this value.<\/p>\n\n\n\n

    4. Button Colors<\/strong><\/h3>\n\n

    Button text color<\/strong>\nHex color of button text.<\/p>\n\n

    Button background color<\/strong>\nHex background color.\nWhen copying, the plugin automatically swaps the text and background colors for visual feedback.\nHowever, if the background is transparent, only the text color is swapped.<\/p>\n\n

    Always transparent background<\/strong>\nIf enabled:\n- The button background always becomes transparent.\n- Only text + border remain visible<\/p>\n\n\n\n

    5. Code Block Max Height<\/strong><\/h3>\n\n

    Code block max height (px)<\/strong>\nSets a maximum height (minimum: 100px).\nContent taller than this becomes scrollable.<\/p>\n\n

    Enable<\/strong>\nMust be checked for the value to apply.<\/p>\n\n

    This prevents long code blocks from stretching your page layout.<\/p>\n\n\n\n

    6. Display Line Numbers<\/strong><\/h3>\n\n

    Display Line Numbers (Enable)<\/strong>\nShows simple line numbers next to each line.\nNotes:\n- Line height is unified for consistency.\n- Theme-specific code styling is preserved.\n- Line wrapping is forcibly disabled.<\/p>\n\n

    This is a built-in lightweight alternative to syntax-highlighter libraries.<\/p>\n\n\n\n

    7. Custom Styles (CSS)<\/strong><\/h3>\n\n

    You can add any custom CSS to adjust:<\/p>\n\n

      \n
    • Button design<\/li>\n
    • Wrapper layout<\/li>\n
    • Code spacing<\/li>\n
    • Line number appearance<\/li>\n<\/ul>\n\n

      Usable Selectors (CSS) :<\/p>\n\n

        \n
      • .copy-code-btn<\/strong> \u2192 The copy button<\/li>\n
      • .copy-code-btn.copied<\/strong> \u2192 The button after Copying<\/li>\n
      • .code-block-wrapper<\/strong> \u2192 Wrapper of the code block (position: relative)<\/li>\n
      • .code-block-wrapper pre<\/strong> \u2192 Inner code text area (the <pre><\/code> element)<\/li>\n

      • .line-numbers<\/strong> \u2192 The container holding the line numbers<\/p><\/li>\n

      • Example:\n .copy-code-btn {<\/code>\n     font-family: \"Comic Sans MS\", cursive;<\/code>\n     font-weight: 700;<\/code>\n     border: none;<\/code>\n }<\/code>\nNote: Do not include any comments.<\/p><\/li>\n<\/ul>\n\n

        Donate<\/h3>\n\n

        If you find this plugin useful and would like to support its development,\nyou can make a voluntary donation via PayPal.<\/p>\n\n

        Your support helps keep this plugin maintained and improved.\nThank you!<\/p>\n\n

        PayPal: https:\/\/www.paypal.me\/Kasuga16<\/p>\n\n\n

          \n

        1. Upload via WordPress Dashboard:<\/p>\n\n

          \u2013 In your WordPress dashboard, go to 'Plugins' \u2192 'Add New'.\n\u2013 Search for \"stick-copy-button-codeblock\" and click 'Install Now'.\n\u2013 Click 'Activate' once the installation is complete.\n\u2013 (Optional) Go to 'Settings' \u2192 'Stick Copy Button' to configure options.<\/p><\/li>\n

        2. Manual Installation via FTP:<\/p>\n\n

          \u2013 Download the plugin's zip file and extract it.\n\u2013 Connect to your server via FTP and navigate to the \"wp-content\/plugins\/\" directory.\n\u2013 Upload the extracted \"stick-copy-button-codeblock\" folder to this directory.\n\u2013 Go to 'Plugins' in your WordPress dashboard and activate the plugin.\n\u2013 (Optional) Go to 'Settings' \u2192 'Stick Copy Button' to configure options.<\/p><\/li>\n<\/ol>\n\n\n

          \n

          Which code blocks does this plugin support?<\/h3><\/dt>\n

          It supports only code blocks marked up in the pre > code<\/code> format.<\/p><\/dd>\n\n<\/dl>\n\n\n

          1.5.1<\/h4>\n\n
            \n
          • Minor fix to the conditional script loading logic introduced in 1.5.0.<\/li>\n<\/ul>\n\n

            1.5.0<\/h4>\n\n
              \n
            • Load scripts only when code blocks are detected.<\/li>\n<\/ul>\n\n

              1.4.0<\/h4>\n\n
                \n
              • Added an option to display line numbers.<\/li>\n
              • Minor bug fixes.<\/li>\n
              • Updated readme.txt.<\/li>\n<\/ul>\n\n

                1.3.0<\/h4>\n\n
                  \n
                • Changed the method for limiting code block height from line count to pixel-based sizing.<\/li>\n
                • Minor bug fixes.<\/li>\n<\/ul>\n\n

                  1.2.0<\/h4>\n\n
                    \n
                  • Added support for limiting code block height by line count.<\/li>\n
                  • Added a Custom CSS option, allowing users to apply their own CSS to style the copy button or code blocks.<\/li>\n<\/ul>\n\n

                    1.1.0<\/h4>\n\n
                      \n
                    • Changed button size settings from a size selector to a numeric input field.<\/li>\n
                    • Minor improvements and cleanup.<\/li>\n<\/ul>\n\n

                      1.0.1<\/h4>\n\n
                        \n
                      • Minor bug fixes<\/li>\n<\/ul>\n\n

                        1.0.0<\/h4>\n\n
                          \n
                        • Initial release<\/li>\n
                        • Optimized and fixed code for official distribution.<\/li>\n
                        • Added internationalization support.<\/li>\n<\/ul>","raw_excerpt":"Adds a floating "Copy" button to every code block, with extensive styling options, optional line numbers, max-height control, and custom CSS support.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/246652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=246652"}],"author":[{"embeddable":true,"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/kasuga16"}],"wp:attachment":[{"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=246652"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=246652"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=246652"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=246652"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=246652"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sna.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=246652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}