WordPress에 멋진 CSS3 버튼 단축 코드를 추가하는 방법

WordPress에서 HTML 편집기를 사용하는 데 열중하지 않거나 프리미엄 테마를 멋지게 향상 시키려면 단축 코드를 사용하여 게시물 편집기의 기능을 확장하고 단순하게 유지하십시오..


무료 파일이나 다른 사이트에 링크를 제공 할 때 내 사이트에 일종의 버튼을 추가하는 것이 멋지다고 생각했습니다 (물론 단축 코드 사용) 내 테마에 단축 코드를 추가 한 후 여기에 코드를 공유 할 것이라고 생각했습니다. 블로그에 버튼 단축 코드를 추가하는 데 관심이있는 다른 사람들이 내 코드를 간단히 복사하여 테마에 붙여 넣을 수 있으므로 짧은 코드를 만들고 버튼의 스타일을 지정하는 데 너무 많은 시간을 소비하지 않아도됩니다.

단축 코드 란??

단축 코드는 WordPress 2.5에서 다시 도입되었으며 게시물 컨텐츠에 사용할 매크로 코드를 작성할 수 있습니다. 간단한 단축 코드는 다음과 같습니다.

[짧은 코드]

포스트 에디터에 추가되면 테마 파일에 정의 된대로 단축 코드의 값을 반환합니다. 코드를 건드리지 않고 포스트 에디터에 버튼을 쉽게 추가 할 수있는 단축 코드를 만드는 방법을 보여 드리겠습니다..

사용자 정의“버튼”단축 코드 추가

가장 먼저해야 할 일은 테마에 단축 코드 용 PHP 코드를 추가하는 것입니다. 다음 코드를 사용하여 사이트에 간단한 버튼을 추가 할 수 있습니다. 이 코드는 functions.php 파일에 넣을 수 있습니다. 타사 테마를 사용하는 경우 이는 WordPress Child 테마를 통해 수행하는 것이 가장 좋습니다..

함수 myprefix_button_shortcode ($ atts, $ content = null) {

// 단축 코드 속성 추출
추출 (shortcode_atts (배열 (
'url'=> '',
'title'=> '',
'target'=> '',
'text'=> '',
'color'=> '녹색',
), $ atts));

// 내용이없는 항목에 텍스트 값 사용
$ content = $ text? $ text : $ content;

// 링크가있는 리턴 버튼
if ($ url) {

$ link_attr = 배열 ​​(
'href'=> esc_url ($ url),
'title'=> esc_attr ($ title),
'target'=> ( 'blank'== $ target)? '_blank': '',
'class'=> 'myprefix-button color-'입니다. esc_attr ($ color),
);

$ link_attrs_str = '';

foreach ($ link_attr as $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ key. '= "'. $ val. '"';

}

}


'를 반환'. do_shortcode ($ content). '';

}

// 링크가 정의되어 있지 않으므로 버튼을 스팬으로 반환
다른 {

'를 반환'. do_shortcode ($ content). '';

}

}
add_shortcode ( 'button', 'myprefix_button_shortcode');

PostPost Editor에서 단축 코드 사용

이제 짧은 코드를 만들었으므로 새“버튼”(스타일을 지정하지 않았으므로 일반 링크처럼 보임)을 게시물 편집기에 추가 할 수 있습니다.

// 사용 예 1
버튼 텍스트 [/ button] // 사용 예 2

버튼 스타일링

일반 링크처럼 보일 경우 단축 코드를 만드는 요점은 무엇입니까? 아무것도. 그렇기 때문에 멋진 CSS3를 추가하여 다운로드 버튼의 스타일을 지정하고 섹시하게 만드는 방법을 보여 드리겠습니다..

단축 코드에서 알 수 있듯이“myprefix-button”클래스를 추가하여 style.css 파일을 통해 쉽게 스타일을 지정할 수 있습니다. 스타일 코드에 다음 코드를 삽입하여 이미지의 멋진 파란색 버튼을 만드십시오..

/ * 메인 버튼 스타일 * /
.myprefix-button {배경 : # 65A343; text-shadow : 1px 1px 1px # 000; -웹킷 테두리 반경 : 5px;-모즈 테두리 반경 : 5px; 경계 반경 : 5px;-웹킷 박스-그림자 : 1px 2px 1px rgba (0, 0, 0, 0.1); -moz-box-shadow : 1px 2px 1px rgba (0, 0, 0, 0.1); 상자 그림자 : 1px 2px 1px rgba (0, 0, 0, 0.1); 커서 : 포인터; 디스플레이 : 인라인 블록; 오버플로 : 숨겨진; 패딩 : 1px; 수직 정렬 : 중간; }

.myprefix-button span {border-top : 1px solid rgba (255, 255, 255, 0.25); -웹킷 테두리 반경 : 5px; 테두리 반경 : 5px; 테두리 반경 : 5px; 색상 : #fff; 디스플레이 : 블록; 글꼴 무게 : 굵게; 글꼴 크기 : 1em; 패딩 : 6px 12px; 텍스트 그림자 : 1px 1px 1px rgba (0, 0, 0, 0.25); }

/ * 호버 * /
.myprefix-button : 호버 {배경 : # 558938; 텍스트 장식 : 없음; }

/ * 활성 * /
.myprefix-button : active {배경 : # 446F2D; }

녹색 단축 버튼

여러 색상 지원

단축 코드에 다른 버튼 색상에 대한 CSS 스타일을 추가하는 데 사용할 수있는 색상 매개 변수가있는 것을 발견했습니다. 예를 들어이 추가 CSS를 추가하여 파란색 옵션을 추가 할 수있는 경우 :

/ * 파란색 버튼 * /
.myprefix-button.color-blue {배경 : # 2981e4}

/ * 파란색 버튼 호버 * /
.myprefix-button.color-blue : 호버 {배경 : # 2575cf}

/ * 파란색 버튼 활성화 * /
.myprefix-button.color-blue : active {배경 : # 0760AD}

이제 간단히 단축 코드에서 색상 매개 변수를 사용하십시오.

버튼 텍스트 [/ button]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map