Title: AMP Sidebar Hamburger Menu Author: James Osborne Published: 2020년 4월 15일 Last modified: 2020년 11월 22일 --- 플러그인 검색 ![](https://ps.w.org/amp-sidebar-hamburger-menu/assets/banner-772x250.png?rev=2283720) 이 플러그인은 **최근 3개의 주요 워드프레스 출시와 시험 되지 않았습니다**. 워드프레스의 좀 더 최근 버전으로 이용할 때 더 이상 관리되지 않고 지원되지 않고 호환성 문제가 있을 수 있습니다. ![](https://ps.w.org/amp-sidebar-hamburger-menu/assets/icon-256x256.png?rev=2283720) # AMP Sidebar Hamburger Menu 작성자: [James Osborne](https://profiles.wordpress.org/jamesosborne/) [다운로드](https://downloads.wordpress.org/plugin/amp-sidebar-hamburger-menu.1.2.0.zip) * [세부사항](https://ko.wordpress.org/plugins/amp-sidebar-hamburger-menu/#description) * [평가](https://ko.wordpress.org/plugins/amp-sidebar-hamburger-menu/#reviews) * [설치](https://ko.wordpress.org/plugins/amp-sidebar-hamburger-menu/#installation) * [개발](https://ko.wordpress.org/plugins/amp-sidebar-hamburger-menu/#developers) [지원](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/) ## 설명 If you’re using AMP in transitional or standard mode check the FAQ’s below, or follow the instructions in the settings tab after installing. **Features: ** * Easy to setup * Works in AMP and non AMP * Fast load, optimal performing * Unlimited hamburger toggle color options * Options for rending in desktop and mobile * Bloatware free, non intrusive * Completely free ## 스크린샷 [⌊Settings Screen⌉⌊Settings Screen⌉[ Settings Screen [⌊Example button⌉⌊Example button⌉[ Example button ## 설치 **Using The WordPress Dashboard** 1. Install as a typical WordPress plugin (from the WordPress repository or via a file upload) 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. After activating the plugin you’ll see a “AMP sidebar” menu within the “Settings” tab 4. Insert the shortcode via a page builder using ``` [jz-sidebar] ``` or insert into your theme files using ``` ``` Note: If you prefer to use your existing navigation menus button simply add the following attributes to your navigation button: ``` ``` Note: You should perform the above using a child theme, so any changes don’t get overwritten. As an alternative to the shortcode above if you wish to add the attributes directly into your navigation menu you can apply the below attribute into your existing button: ``` on="tap:sidenav.open" role="button" tabindex="0" ``` ## FAQ ### How does it work? After assigning a menu to the newly created “AMP Sidebar” location there are different ways to apply the navigation menu. One method is to use a shortcode to into your favourite code editor (or widgets as of WordPress 4.9). ``` [jz-sidebar] ``` If you wish to place the shortcode into your theme templates you can do so by adding the below, wherever you choose. For best results find the location of your existing hamburger menu, and apply the following: ``` ``` If you want to use your existing hamburger menu for AMP URLs and use this plugin the below can be added as an attribute to your existing button. Please backup your site first: ``` ``` ### Can I use my existing themes navigation button / hamburger menu? Sure, you’ll need to add the below code snippet in between your button markup. If you’re unable to locate your themes navigation menu button check with your theme developer. You simply need to add the below in as an attribute to your existing button. ``` ``` ### I don’t know where to place it in my theme files? If you’re unsure where to place the data attribute to use with your existing navigation menu check with your theme developer. Bear in mind this plugin may not be required at all if your theme supports AMP. So be sure to ask your theme developer if they have AMP compatibility plans first. ### Should I use a child theme? Using a child theme is highly recommended. You never know when things go wrong. In addition to safeguarding against mishaps theme updates won’t overwrite your additions. ### Should I perform a backup first? Of course, performing regular backups is general best practice. I don’t take any responsibility for site issues due to misconfiguration, or shortcode misplacement. ### Can I use this plugin for my non AMP site? Good question – yes, you can. If you are looking to use this for your non AMP site you should select the “AMP & Canonical” option from the configuration settings. You’ll need to place the shortcode or navigation menu attributes into your theme files (preferably via a child theme) ### I’m using AMP in reader mode, where do I apply the code snippet or shortcode? If using the AMP plugin in reader mode you are making use of the AMP plugins classic templates. The hard work is all done, simply install and activate the plugin before checking your reader mode AMP urls. One thing to note when using reader mode, the amp-sidebar hamburger menu will not be added to your non AMP urls until you place the shortcode into your child themes templates. The “AMP & Canonical” option is redundant, unless of course you decide to add the shortcode to your theme. ### Can I use it to replace my existing WordPress menu? Sure, but you’ll have to locate your existing navigation menu and replace it with this hamburger menu. Note that this plugin only offers a hamburger menu. There is no support for a horizontal dropdown menu. ### I don’t like the styling, how do I change it? You can apply CSS as you would normally, to your active themes style.css file,your themes “custom CSS” field, or preferably a custom plugin. ### It’s not working, what can I do? Perform the following checks or considerations: 1. Are you viewing from mobile? 2. Did you assign your menu to the AMP sidebar menu location? 3. Did you place the shortcode into a visible part of your site? 4. Did you tick the checkbox in your menus screen? If you’ve set the option to display the hamburger menu in AMP URLs only make sure you’re checking from an actual AMP url. You can use the AMPinspect Chrome extension to view your AMP URLs, or the AMP plugins preview, admin bar link. 5. Did you insert the shortcode/navigation snippet in the correct place? If you added a shortcode to your content (ie. widgets) are you sure that widget appears on the URL you are checking? If you added a shortcode to your theme files directly you will need to ensure it’s correctly placed. Feel free to open a support topic if you have any problems. 6. Did you insert the AMP button code snippet into the correct theme button? You may be using a complex theme, with different menus based on different devices. 7. Are you using the correct theme? When adding code snippets to your theme templates do you have that template active? If using a child theme you may need to add the code snippet to your parent theme, depending on how you setup your child theme. 8. Check your defined menu colour! By default the navigation/hamburger menu button is a light black colour. This might not suit your site/menu background if also black. A black menu on a black ground = invisible! ### I love it, do you have any other tips for my AMP site? If you’ve just got your navigation menu working in your non compatible theme (via this plugin) be sure to also check whether your search button is working, along with your back to top button. If your back to top isn’t working it may be JavaScript based, checkout this solution. We’ll have a search box plugin released soon. If you manage to get your incompatible site working it would be great to hear from you. Share a review with your site URL, or get your AMP site listed on the plugins website showcase. ### Where can I download the AMP plugin? You can checkout the plugin on the [WordPress repository](https://wordpress.org/plugins/amp/). Alternatively visit the plugin website, www.amp-wp.org. If you can’t configure as expected leave a support question for the team to assist. Don’t be one of those guys leaving a review without having raised a support topic. ### Where can I find out more about AMP? The best place to find out more is amp.dev. Other useful resources below: – [www.amp-wp.org](http://www.amp-wp.org): The official plugin website. – [The AMP Channel](https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw) on YouTube – [AMP](https://amphtml.slack.com) on Slack ## 후기 ![](https://secure.gravatar.com/avatar/5bea9984cfdaf0c5dd78d084e57fd0b8c98acd8a8506605134e7d3a48b6cc53b? s=60&d=retro&r=g) ### 󠀁[Exactly what you need](https://wordpress.org/support/topic/exactly-what-you-need-25/)󠁿 [neviosh](https://profiles.wordpress.org/neviosh/) 2023년 12월 13일 답글 1개 Totally customisable and open, thank you. ![](https://secure.gravatar.com/avatar/c0b89ad03f3e62d46d58e8d24617cfc9c648a5d2d9c90676e198e0c91afb0a8f? s=60&d=retro&r=g) ### 󠀁[it didn’t work correctly](https://wordpress.org/support/topic/it-didnt-work-correctly/)󠁿 [kirnata](https://profiles.wordpress.org/kirnata/) 2021년 5월 4일 Hi! Unfortunately, it didn't work correctly for me ![](https://secure.gravatar.com/avatar/96442adfeaee053c54105cbd2ec27d6f1a9e8851694549c14101e64003f1ea69? s=60&d=retro&r=g) ### 󠀁[5 str](https://wordpress.org/support/topic/5-str/)󠁿 [Joshua](https://profiles.wordpress.org/estudovt/) 2021년 3월 11일 답글 1개 Thank you ! Great ! ![](https://secure.gravatar.com/avatar/f0bbfb508add0a4e5cf8c03b088551eda48a6d3d30b8996cec1885ecfe8d71ee? s=60&d=retro&r=g) ### 󠀁[It Works](https://wordpress.org/support/topic/it-works-1866/)󠁿 [code4d1](https://profiles.wordpress.org/code4d1/) 2020년 6월 1일 답글 1개 IT work well so far on my elementor based website. Help me alot since right now elementor not yet fully compatible with amp. Thanks. ![](https://secure.gravatar.com/avatar/8965066d99edfa27859b835c2f4bb1aef0e6bec228606be33a4479e49fb63e2e? s=60&d=retro&r=g) ### 󠀁[Simple and effective](https://wordpress.org/support/topic/simple-and-effective-1122/)󠁿 [ghost51](https://profiles.wordpress.org/juangose/) 2020년 5월 1일 답글 1개 Good plugin, simple but very effective and excellent support. [ 모든 5 평가 읽기 ](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/) ## 기여자 & 개발자 “AMP Sidebar Hamburger Menu”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다. 기여자 * [ James Osborne ](https://profiles.wordpress.org/jamesosborne/) [자국어로 “AMP Sidebar Hamburger Menu”(을)를 번역하세요.](https://translate.wordpress.org/projects/wp-plugins/amp-sidebar-hamburger-menu) ### 개발에 관심이 있으십니까? [코드 탐색하기](https://plugins.trac.wordpress.org/browser/amp-sidebar-hamburger-menu/) 는, [SVN 저장소](https://plugins.svn.wordpress.org/amp-sidebar-hamburger-menu/)를 확인하시거나, [개발 기록](https://plugins.trac.wordpress.org/log/amp-sidebar-hamburger-menu/) 을 [RSS](https://plugins.trac.wordpress.org/log/amp-sidebar-hamburger-menu/?limit=100&mode=stop_on_copy&format=rss) 로 구독하세요. ## 변경이력 #### 1.0 * Initial release #### 1.1.0 * Corrected plugin link and minor changes #### 1.2.0 * Improved reader mode position * Removed duplicate option call * Modified text and added styling to sidebar message which appears when users don’t assign a menu * Changes to the way the plugin uses amp-components when the AMP plugin is inactive ## 기초 * 버전 **1.2.0** * 최근 업데이트: **6년 전** * 활성화된 설치 **100+** * 워드프레스 버전 ** 4.0 또는 그 이상 ** * 다음까지 시험됨: **5.5.23** * 언어 * [English (US)](https://wordpress.org/plugins/amp-sidebar-hamburger-menu/) * 태그: * [navbar](https://ko.wordpress.org/plugins/tags/navbar/)[Navigation Menu](https://ko.wordpress.org/plugins/tags/navigation-menu/) * [고급 보기](https://ko.wordpress.org/plugins/amp-sidebar-hamburger-menu/advanced/) ## 평점 별 5점 만점에 4.4점. * [ 4/5-별점 후기 ](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/?filter=5) * [ 0/4-별점 후기 ](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/?filter=4) * [ 0/3-별점 후기 ](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/?filter=3) * [ 1/2-별점 후기 ](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/?filter=2) * [ 0/1-별점 후기 ](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/#new-post) [모든 리뷰 보기](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/reviews/) ## 기여자 * [ James Osborne ](https://profiles.wordpress.org/jamesosborne/) ## 지원 할 말 있으신가요? 도움이 필요하신가요? [지원 포럼 보기](https://wordpress.org/support/plugin/amp-sidebar-hamburger-menu/)