MakeITeasy Back To Top

설명

Very customizable and lightweight back to top 🔝 solution.

Fully compatible with Full Site Editing themes and with classic themes if block editor is enabled.

How this differs from other similar plugins?

This is a block, inside which you can insert any other block. This makes it utmost customizable. By default, a button block with inline image is inserted, but you can remove it and insert any other block you wish or customize default button or insert your own image. As button is a normal WordPress block, you can customize it like you would normally do, pick background color or foreground color from sidebar, choose border radius for edges, or anything else which is customizable in block editor.

Features (block editor sidebar)

  • In the block sidebar, it is possible to choose if the block will appear both on desktop and mobile variant of page and breakpoint between the two.
  • Choose page scroll mode when clicked on button: smoothly or instantly.
  • Opacity of the block.
  • Duration of slow appearance (“fade in”).
  • Position of the block from bottom right corner of the browser window, in css unit by choice.

NEW!

Introduced go to bottom functionality – can be turned on in block sidebar (off by default). When user scrolls down button flips down ⬇ and leads to bottom of page, when scrolled up it flips up ⬆ and leads to top of page.

Usage

General

Plugin provides a block called “Back to top”, which serves the commonly known purpose to take user to top of the page. By default, button appears only when user scrolls some amount down.

Block themes

The best way to use plugin is using full site editing theme. There you can add it to footer (alternatively to header) and block will be displayed on each page with this footer. If you add it to page, it will be displayed for this page only.

Classic themes

As mentioned above, adding this block to page will show it only on this page. To show it on many/all pages, you have to add it to footer (or header). You can do so by creating block on one of the pages and copy its code (copy option from block menu). Then, add echo do_blocks($content); line in your footer (header) php template, where you replace $content with copied block content string. Content must be between single quotes, as it is string, according to rules of PHP. Or even better, use nowdoc syntax.
Example for theme GeneratePress:

First create child theme, so your code is not overwritten by theme updates. Then in footer.php, after line 13 of original footer.php of theme insert following code:

echo do_blocks(
    <<<'block'
    <!-- wp:makeiteasy/back-to-top -->
        <div id="makeiteasy-back-to-top" data-smooth-scroll="false" data-enable-on-desktop="true" data-break-point-mobile-desktop="768" data-go-to-bottom="true" style="--makeiteasy-back-to-top-opacity:0.7;--makeiteasy-back-to-top-visibility-transition-duration:0.3s;--makeiteasy-back-to-top-right:30px;--makeiteasy-back-to-top-bottom:30px" class="wp-block-makeiteasy-back-to-top"><!-- wp:button {"style":{"spacing":{"padding":{"top":"12px","right":"12px","bottom":"12px","left":"12px"}},"border":{"radius":"9px"}}} -->
        <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:9px;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCA5NiA0ODAgMjgzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im00MyAzNzktNDMtNDMgMjQwLTI0MCAyNDAgMjQwLTQzIDQzLTE5Ny0xOTd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+Cg==" alt="Back to top arrow" width="24" height="24"></a></div>
        <!-- /wp:button --></div>
    <!-- /wp:makeiteasy/back-to-top -->
    block
);

Important note:

If you install block through block editor, and after creating block, you copy block code to footer and delete original block in page, plugin will be automatically uninstalled. This is handled by WordPress.
Therefore, if you are using classic theme and you will use block code only in PHP, either install plugin in a classic way through plugins page or keep one copy of block active somewhere (e.g dummy draft page), to prevent automatic uninstall.

스크린샷

  • Desktop post
  • Mobile post
  • Full site editing - footer

블록

이 플러그인은 1(을)를 제공합니다.

  • Back to top Back to top button

설치

You can install the plugin in usual way, however, the easiest way to get it is in block editor, by entering search phrase ‘back to top’ or similar while inserting new block with ‘+’ sign in top bar.

“Usual” way:

  1. Install the plugin through the WordPress plugins screen directly or upload the plugin files to the /wp-content/plugins/makeiteasy-back-to-top directory.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress

FAQ

How customizable is it?

You can use everything block editor provides.

Can I insert any custom block or pattern and keep back to top functionality?

Yes, but you should take care to preserve accessibility. Button is the best element, since button is accessible HTML element and it is clear that it gives some action.

Can I insert my own block inside

Yes, but see above notes.

후기

이 플러그인에 대한 평가가 없습니다.

기여자 & 개발자

“MakeITeasy Back To Top”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

자국어로 “MakeITeasy Back To Top”(을)를 번역하세요.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하세요.

변경이력

1.1.1

Update incorrect description how to insert block in footer in classic theme. Added example for GeneratePress theme.
Fixed block to appear on right side in editor while classic theme is active.
Fixed Go to bottom function not working in some instances.

1.1.0

Introduced option “Go to bottom”

1.0.1

  • Fix for incorrect alt attribute on inline image inside button on default template – thanks @thisbit (Elvis Krstulović) for testing and spotting.

1.0.0

  • Release