WordPress에 AMP를 사용하는 방법

AMP는 공동의 노력으로 모바일 환경의 웹 사이트에 대한 페이지로드 성능 향상. 그러나, 당신은 이전 튜토리얼에서 찾을 수 있습니다, 당신은 당신의 웹 사이트에서 멋진 물건을 희생하고 엄격하게 규칙을 준수, 지침을 준수하고 검증 된 페이지를 얻을 수있을 것이다. 할 일이 많이있는 것처럼 들리지만 그렇지 않습니다.?

다행스럽게도 WordPress로 웹 사이트를 구축 한 경우 AMP-WP라는 플러그인을 사용하여 웹 사이트에 AMP를 즉시 적용 할 수 있습니다. 눈에 보이는 것보다 많은 기능이 제공됩니다. 자, 어떻게 작동하는지 보겠습니다..

활성화

시작하려면 웹 사이트에 로그인하고로 이동하십시오. 플러그인> 새로 추가 화면. 검색 “AMP; Automattic에서 하나를 설치하고 활성화하십시오..

활성화되면 AMP로 변환 된 게시물을 / amp / 게시물 URL의 끝 부분 (예 :. http://wp.com/post/amp/) 또는 ?amp = 1 (예 :. http://wp.com/post/?amp=1) 귀하의 웹 사이트에서 Pretty Permalinks 기능을 사용하지 않는 경우.

그리고 위에서 볼 수 있듯이이 게시물에는 기본 스타일링이 추가되어 사용자 정의 할 수 있습니다..

주의 사항

현재 플러그인의 상태에 대해 알아야 할 몇 가지 사항이 있습니다.

• 기록 보관소 - 범주, 꼬리표 과 맞춤 분류학 - 현재 지원되지 않습니다. AMP 규격 형식으로 변환되지 않습니다. 그러나 사용자 정의 포스트 유형은 필터를 통해 AMP로 시작할 수 있습니다.
• 대시 보드에 새 설정 화면이 추가되지 않습니다.. 사용자 지정은 코드 수준에서 수행됩니다. 액션, 필터, 클래스 포함.
• 플러그인은 현재 다음과 같은 모든 AMP 사용자 정의 요소를 포함하지 않습니다. amp-analytics 과 앰프 광고 상자 밖으로. 이 요소가 필요한 경우에는 플러그인의 액션 또는 필터에 연결하여 포함해야합니다.

사용자 정의

플러그인은 스타일, 페이지 컨텐츠 및 AMP 페이지의 HTML 마크 업 전체를 사용자 정의하는 것 이상의 유연성을 제공하는 다양한 조치 및 필터를 제공합니다.

스타일

나는이 일이 플러그인을 활성화 한 후, 같은 헤더 배경 색상, 폰트 패밀리를 변경하는 등 즉시 변경할 것, 그리고 더 나은 귀하의 웹 사이트 브랜드와 개성에 맞게 글꼴 크기 확신.

그렇게하기 위해 우리는 amp_post_template_css 에서의 행동 functions.php 우리 테마의 파일.

function theme_amp_custom_styles () ?> nav.amp-wp-title-bar background-color : orange;   
Chrome DevTools를 살펴보면이 스타일이