콘텐츠
웹 개발은 빠르게 변할 수 있지만 여기에 남아있는 두 가지는 WordPress와 반응 형 디자인입니다. 반응 형 WordPress 테마 및 플러그인을 빌드하는 방법을 아는 것은 필수입니다.이 자습서에서는 반응 형 포트폴리오를위한 WordPress 플러그인 및 테마 템플릿을 만드는 방법을 살펴 봅니다.
우리는 두 개의 모형 템플릿으로 작업 할 것입니다. 하나는 최근 프로젝트를 모두 나열하는 아카이브 페이지와 특정 프로젝트를 표시하는 단일 페이지입니다. 포트폴리오의 아카이브 페이지는 헤더와 전체 너비의 프로젝트 열 3 개가있는 매우 간단한 페이지입니다. 화면이 작아짐에 따라 두 열로 축소 된 다음 한 열로 축소됩니다. HTML 및 CSS는 GitHub에서 사용할 수 있습니다. 페이지의 각 프로젝트는이 구조를 갖습니다.
이 튜토리얼의 독점 스크린 캐스트보기 :
이것은 WordPress Loop에 의해 생성되는 HTML입니다.
div> img src = "project.png"> h3> 사이트 이름 / h3> p> 간단한 설명 및 링크 a href = "#"> 자세히 알아보기 ... / a> / p> / div>
단일 페이지는 유사한 레이아웃을 갖게되며 모든 텍스트를 .계획 대신에 .카드. CSS도 상당히 가볍고 크기가 조정될 것입니다. 또한 사이트 파일에서 style.scss 파일. 저는 Sass를 사용하여 모든 CSS를 개발했지만 걱정하지 마세요. style.css 읽을 수있는 방식으로 컴파일됩니다.
새 사용자 지정 게시물 유형 만들기
Custom Post Type은 WordPress의 개체로, 원하는 모든 유형의 콘텐츠를 WordPress 편집기에 추가하여 게시물과 동일한 방식으로 처리 할 수 있습니다. 새로운 WordPress 설치에는 게시물 및 페이지에 대한 메뉴 옵션이 있습니다. 둘 다 콘텐츠를 다르게 처리하는 게시물 유형으로 간주됩니다. Custom Post Types를 사용하면 새로운 유형의 콘텐츠를 생성하는 옵션을 WordPress 관리자 메뉴에 추가 할 수 있습니다. 포트폴리오라는 사용자 지정 게시물 유형을 만듭니다.
포트폴리오 프로젝트를위한 더 큰 WordPress 플러그인의 일부로이 Custom Post Type을 개발할 것입니다. 테마에 기능을 추가 할 수는 있지만 콘텐츠가 디자인과 연결되어 있기 때문에 이는 나쁜 습관입니다. 테마를 변경하면 포트폴리오를 잃게됩니다. 디스플레이는 템플릿 / 템플릿 태그와 편집기를 통해 사용할 수있는 단축 코드의 두 가지 방법을 통해 처리합니다.
첫 번째 단계는 플러그인을 정의하는 것입니다. 폴더 만들기 / wp-content / plugins / 원하는대로 이름을 지정합니다. 나는 내 이름을 지었다 / jlc-projects /. 해당 폴더 안에 같은 이름의 파일을 만듭니다 (예 : jlc-projects.php) 다음 코드를 추가하십시오.
? php / * 플러그인 이름 : Joe의 포트폴리오 플러그인 플러그인 URI : https://github.com/jcasabona/wp-portfolio 설명 : 사용자 지정 게시물 유형을 사용하여 WordPress로 프로젝트 포트폴리오를 만들고 표시하는 간단한 플러그인입니다! 작성자 : Joe Casabona 버전 : 1.0 작성자 URI : http://www.casabona.org * / define (’JLC_PATH’, WP_PLUGIN_URL.’/’. plugin_basename (dirname (__ FILE__)).’/’); define ( 'JLC_NAME', "Joe의 포트폴리오 플러그인"); require_once ( 'jlc-project-cpt.php'); ?> var13->
여기에는 몇 가지 일이 있습니다. 첫 번째는 WordPress 플러그인에 대한 표준 플러그인 정의입니다. 다음 몇 줄은 상수를 만들고 나머지 플러그인에 필요한 파일을 포함합니다. 이 시점에서 다른 파일은 하나뿐입니다. jlc-project-cpt.php.
또한 모든 것에 접두사 JLC_ (또는 jlc-)를 사용하고 있음을 알 수 있습니다. 사용할 접두사를 직접 선택해야합니다. 변수 및 함수 이름을 접두사로 지정하면 플러그인이 다른 테마 또는 플러그인과 충돌 할 가능성이 줄어 듭니다.
시작하기 전에 jlc-project-cpt.php, 코드를 하나 더 추가하고 싶습니다. jlc-projects.php. 아래 코드는 Custom Post Type과 함께 사용할 새 이미지 크기를 생성합니다.
if (function_exists (’add_theme_support’)) {add_theme_support (’post-thumbnails’); add_image_size (’jlc_project’, 1100, 640, true); }
이제 만들 시간입니다 jlc-project-cpt.php. 여기서는 중요한 코드에 대해서만 설명하지만 전체 코드는 GitHub 저장소에서 찾을 수 있습니다. 먼저 (개봉 후 ? php 태그) 사용자 지정 게시물 유형을 정의합니다.
add_action (’init’,’jlc_projects_register’); function jlc_projects_register () {$ args = array ( 'label'=> __ ( 'Portfolio'), 'singular_label'=> __ ( 'Project'), 'public'=> true, 'show_ui'=> true, 'capability_type '=>'post ','hierarchical '=> true,'has_archive '=> true,'supports '=> array ('title ','editor ','thumbnail '),'rewrite '=> array ('slug '=>'포트폴리오 ','with_front '=> false)); register_post_type (’포트폴리오’, $ args); register_taxonomy ( "jlc-project-type", array ( "portfolio"), array ( "hierarchical"=> true, "label"=> "프로젝트 유형", "singular_label"=> "프로젝트 유형", "다시 쓰기"= > 참)); }
이것은 표준 사용자 정의 포스트 유형 정의 기능입니다. init에서 호출하는 액션을 추가 한 다음 인수 목록을 register_post_type (), 유형의 슬러그와 함께 '포트폴리오'가됩니다. 게시물 유형을 등록한 후 사용자 지정 분류를 등록하여 게시물 유형과 함께 이동합니다. 이 두 기능을 함께 유지하는 것이 중요합니다. 그렇지 않고 분류 체계가 먼저 등록되면 WordPress에서 오류가 발생합니다.
Custom Post Type이 정의되면 사용할 사용자 지정 메타 데이터를 추가 할 차례입니다. 우리의 Custom Post Type은 제목, 편집기 (본문 텍스트로 사용됨) 및 추천 이미지가 들어갈 썸네일을 지원합니다. 포트폴리오에 추가하고 싶은 것이 하나 더 있습니다. 제가 소개하는 웹 사이트의 URL입니다. 먼저 관리자에서이 상자를 추가 할 함수를 만듭니다.
add_action ( "admin_init", "jlc_projects_admin_init"); function jlc_projects_admin_init () {add_meta_box ( "jlc-projects-meta", __ ( "프로젝트 링크"), "jlc_projects_options", "portfolio", "side", "low"); } function jlc_projects_options () {global $ post; if (defined (’DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ custom [ "jlc_projects_link"] [0]; ?> var13-> 입력 이름 = "jlc_projects_link"placeholder = "http : //"value = "? php echo $ link;?> var13->"/>? php}
이러한 기능은 매우 간단합니다. 관리자가 시작 (즉,로드 됨)되면 다음과 같은 함수를 호출합니다. jlc_projects_admin_init () 그러면 포트폴리오 항목에 대한 새 메타 상자가 생성됩니다. 그 상자, 새로운 함수를 생성하려면 jlc_projects_options ()을 호출합니다.
일단 안으로 옵션 함수, 우리는 단순히 링크 가치, 우리는 jlc_projects_link, 인쇄하십시오. 하지만 먼저 자동 저장이 수행되고 있지 않은지 확인하려고합니다. 그렇다면 데이터가 손실 될 수 있습니다. 그 후 게시물이 저장 될 때 실제로 메타 데이터를 저장해야합니다.
add_action (’save_post’,’jlc_projects_save’); function jlc_projects_save () {global $ post; if (defined (’DOING_AUTOSAVE’) && DOING_AUTOSAVE) {return $ post_id; } else {update_post_meta ($ post-> ID, "jlc_projects_link", $ _POST [ "jlc_projects_link"]); }}
맞춤 게시물 유형에 대한 관리 섹션이 생성되었으므로 방문자에게 프로젝트를 표시하는 데 도움이되는 몇 가지 프런트 엔드 기능을 추가해야합니다. 이것은 아카이브 템플릿, 단일 페이지 템플릿 및 단축 코드 (이 자습서에서는 다루지 않음)로 구성됩니다. 하지만 그 전에 이미지를 표시하기 위해 만들 다른 함수가 하나 있습니다. picturefill.js입니다.
이 JavaScript 조각 (여기에서 GitHub 저장소를 찾을 수 있음)을 사용하면 이미지를보고있는 화면 크기에 더 친숙한 버전으로 전환하는 미디어 쿼리 집합을 정의 할 수 있습니다. 이것은 또한로드 시간에 영향을줍니다. 작은 화면이 4G, 3G 또는 EDGE를 사용하는 모바일 장치를 의미한다고 가정 할 수 있기 때문입니다. 항상 그런 것은 아니지만 아무것도없는 것보다 낫다는 것을 알고 있습니다.
GitHub 저장소에서 표준 picturefill 요소에 대한 마크 업 패턴을 볼 수 있습니다. 우리는 무제한을 가질 수 있습니다 스팬> 우리가 가지고있는 이미지의 각 크기에 대한 요소. JavaScript가없는 사용자를위한 대체 방법도 있습니다. 상상할 수 있듯이 WordPress는 Media Uploader를 사용하여 업로드하는 모든 이미지의 여러 버전을 생성하므로 picturefill.js에 적합합니다. 가장 먼저해야 할 일은 스크립트를로드하는 것입니다. / js / 플러그인 디렉토리의 폴더. 다음 코드를 추가합니다. jlc-projects.php:
function jlc_projects_scripts () {wp_enqueue_script (’picturefill’, JLCP_PATH.’js / picturefill.js’, array ()); } add_action (’wp_enqueue_scripts’,’jlc_projects_scripts’);
그러면 다른 플러그인에서로드되는 스크립트와 함께 JavaScript가로드됩니다. 또한 picturefill.js를 두 번 이상로드하지 않도록합니다.
프로젝트에서 추천 이미지 섹션을 사용하여 스크린 샷을 표시 할 것이므로 기본 추천 이미지 마크 업을 다음을 사용하여 대체 할 수 있습니다. post_thumbnail_html 필터. 이 기능은 실제로 사이트의 모든 추천 이미지 섹션을 대체합니다. 이로 인해 충돌이 발생할 수있는 경우 (아마도) 플러그인에 몇 가지 조건을 추가하여이 필터가 포트폴리오 페이지에서만 사용되는지 확인해야합니다.
add_filter (’post_thumbnail_html’,’jlc_projects_get_featured_image’); function jlc_projects_get_featured_image ($ html, $ aid = false) {$ sizes = array ( ‚’thumbnail’,’medium’,’large’,’jlc_project’,’full’); $ img =’span data-picture data-alt = "’. get_the_title ().’">’; $ ct = 0; $ aid = (! $ aid)? get_post_thumbnail_id () : $ aid; foreach ($ sizes as $ size) {$ url = wp_get_attachment_image_src ($ aid, $ size); $ width = ($ ct sizeof ($ sizes) -1)? ($ url [1] * 0.66) : ($ width / 0.66) +25; $ img. =’span data-src = "’. $ url [0].’"’; $ img. = ($ ct> 0)? ’data-media = "(min-width :’. $ width .’px)"> / span>’:’> / span>’; $ ct ++; } $ url = wp_get_attachment_image_src ($ aid, $ sizes [1]); $ img. =’noscript> img src = "’. $ url [0].’"alt = "’. get_the_title ().’"> / noscript> / span>’; return $ img; }
여기에 몇 가지 일이 있습니다. 첫 번째는 함수에 우리가 사용하려는 WordPress의 모든 이미지 크기 배열이 있다는 것입니다. 고유 한 크기를 정의한 경우 여기에 추가해야합니다. 따라서 picturefill 요소가 정확하게 채워집니다. 몇 가지 설정 (이미지 크기 정의, 그림 채우기 요소 열기, 카운터 초기화) 후에는 $ sizes, 각각에 대한 이미지 항목을 인쇄합니다.
각 항목에 대해 wp_get_attachment_image_src () 이미지의 ID를 기반으로 이미지의 URL을 가져 오기 위해 호출됩니다. get_post_thumbnail_id () 게시물 ID) 및 크기를 기준으로 반환됩니다. wp_get_attachment_ image_src () 이미지, 너비, 높이 및 잘림 여부를 포함하는 배열을 반환합니다. 중단 점을 결정할시기와 축소판 이미지를 처리하는 방법을 계산하기 위해 여기에 약간의 수학이 진행됩니다. 여기서 자세히 논의하지는 않겠지 만이 문제는 해결해야 할 중요한 문제이며 솔루션이 빠르게 진화하고 있다는 점에 주목할 가치가 있습니다.
이제 게시물의 썸네일을 가져올 때마다 반환되는 HTML은 함수에서 가져옵니다.
아카이브 페이지 만들기
다음으로 새로운 Custom Post Type에 대한 아카이브 템플릿을 생성합니다. 이것은 기본적으로 표시되며 기본 포트폴리오 페이지로 사용됩니다.
(참고 :이 자습서에서는 사이트의 홈페이지를 만들지 않지만 이렇게하려면 템플릿 태그 나 단축 코드를 사용하여 사용자 지정 루프를 실행해야합니다. WP_Query.)
사용중인 테마 디렉토리에 새 파일을 만들고 이름을 지정합니다. archive-portfolio.php. WordPress의 템플릿 계층 구조는 사용자가 포트폴리오 페이지에있을 때이 템플릿을 사용하여 콘텐츠를 표시해야한다는 것을 알 수있을만큼 똑똑합니다. 이 시점에서 내 권장 사항은 page.php 이 템플릿에 대한 템플릿입니다. 루프 부분 만 교체하겠습니다.
사이드 바가없는 템플릿이나 단일 열 템플릿을 사용하는 것이 좋습니다. 여기에 언급 된 CSS는 좀 더 잘 작동합니다. 루프는 다음과 같습니다.
? php while (have_posts ()) : the_post (); ?> var13-> div>? php the_post_thumbnail ( 'jlc_project'); ?> var13-> h3>? php the_title (); ?> var13-> / h3> p>? php echo get_the_excerpt (); ?> var13-> a href = "? php the_permalink ();?> var13->"> 자세히 알아보기 ... / a> / p> / div>? php endwhile; ?> var13->
이것은 매우 간단합니다. 기본 HTML을 the_post_thumbnail (), 사용할 이미지의 인수는 picturefill.js 마크 업을 사용하여 모든 크기가 반환되므로 중요하지 않습니다. 나는 사용하기로 결정했다 get_the_excerpt () 에 포함 된 마크 업을 제외하려면 the_excerpt ().
일부 CSS가 포함 된 플러그인을 디자인 할 때 테마의 CSS와 맞닥 뜨리지 않도록 최대한 최소화하거나 사용자가 CSS를 완전히 제외 할 수있는 기능을 제공하지 않도록하는 것이 중요합니다. 테마 내에서 템플릿을 만들고 있기 때문에 약간의 흔들림이 있습니다. 다음은 아카이브 페이지의 각 프로젝트에 추가 한 (Sass 생성) CSS의 일부입니다.
.card img {디스플레이 : 블록; 여백 : 0 자동; } @media 화면 및 (최소 너비 : 45.88em) {.card {디스플레이 : 인라인 블록; 폭 : 40 %; }} @media 화면 및 (최소 너비 : 54.62em) {.card {너비 : 44 %; }} @media 화면 및 (최소 너비 : 76.38em) {.card {너비 : 29 %; }} @media 화면 및 (최소 너비 : 99.4em) {.card {너비 : 30 %; }
프로젝트 카드를 나란히 배치하는 데 가장 적합한 중단 점을 결정했습니다. 또한 추천 이미지 센터를 자동으로 만들었습니다.
단일 페이지 만들기
이제 포트폴리오 프로젝트를위한 단일 템플릿을 만듭니다. 사용자가 단일 프로젝트 페이지를 방문 할 때마다 이것이 표시됩니다. 테마에 새 파일을 만들고 이름을 single-portfolio.php 다른 템플릿을 복사하여 거기에 붙여 넣으세요. archive-portfolio.php). 이번에는 루프를 다음 코드로 대체합니다.
? php while (have_posts ()) : the_post (); ?> var13-> h2>? php the_title (); ?> var13-> / h2>? php the_post_thumbnail ( 'jlc_project'); ?> var13->? php the_content ( '이 항목의 나머지 읽기'); ?> var13->? php if (function_exists ( 'jlc_projects_get_link')) {$ jlc_link = jlc_projects_get_link ($ post-> ID); if ($ jlc_link) {?> var13-> a href = "? php print $ jlc_link;?> var13->"> 사이트 방문 / a>? php}}?> var13->? php endwhile; ?> var13->
이것은 아카이브 템플릿과 비슷해 보이지만 여기에서 추가 함수를 호출합니다. jlc_projects_get_link (). 이것을 플러그인에 추가하고 현재 프로젝트의 URL을 반환합니다.
URL이없는 경우 false를 반환하고 버튼이 표시되지 않습니다. 기능 (위치 : jlc-projects.php)는 다음과 같습니다.
function jlc_projects_get_link ($ id) {$ url = get_post_custom_values (’jlc_projects_link’, $ pid); return ($ url [0]! =’’)? $ url [0] : 거짓; }
이 페이지의 CSS는 주로 테마에 따라 달라집니다. 멋진 버튼을 생성하기 위해 CSS를 사용했습니다. 직접 만든 CSS가 기본 테마를 방해하지 않는지 확인하십시오.
결론적으로
지금까지 우리는 포트폴리오에 대한 새로운 Custom Post Type을 추가하는 플러그인을 만들고 이미지를 더 잘 처리하기 위해 picturefill.js를 통합하고 정보를 표시하는 두 개의 테마 템플릿을 만들었습니다.
튜토리얼의 GitHub 저장소에는 여기에 표시된 모든 코드와 내가 사용한 테마, 단축 코드 및 템플릿 태그가 포함되어 있습니다.
말: 조 카사 보나
이 기사는 원래 인터넷 잡지 254 호에 실 렸습니다.
