가입과 유사한 OTA 웹 사이트를 만듭니다.meta Box가 있는 com - P1: 호텔 객실 소개 페이지 만들기
9094 단어 wordpress
본 시리즈의 첫 번째 글에서 우리는 모든 호텔에 페이지를 만들고 사용자 정의 필드를 만들어서 호텔 정보를 입력한 다음에 사이트에 표시할 것이다.
이렇게 하려면 다음 플러그인을 설치해야 합니다.
1단계: 호텔 페이지의 새로운 게시물 유형 만들기
MB 사용자 정의 게시물 유형을 사용하면 쉽게 완료할 수 있습니다.먼저 관리 대시보드에서 Meta Box > Custom Post Type으로 이동하여 New Post Type을 클릭합니다.
그런 다음 게시물 유형에 대한 필수 정보를 입력하고 게시를 클릭합니다.사용자 정의 게시물 유형을 만드는 방법에 대한 자세한 정보here를 얻을 수 있습니다.
2단계: 호텔 게시물 유형에 대한 사용자 정의 필드 만들기
이 단계에서 새로 만든 호텔post 형식에 사용자 정의 필드를 추가하려면 Meta Box Builder 확장이 필요합니다.분명히 당신은 자금을 절약하기 위해 수동으로 인코딩할 수 있습니다.단, 인코딩 시간을 절약하고 싶거나, 인코더가 아니라면, 사용자 인터페이스를 사용하여 사용자 정의 필드와 무료 Online Generator 도구의 상자를 만들 수 있습니다.이 코드를 사용하여 코드를 생성한 다음
functions.php
파일에 추가합니다.본문에서 나는 원통 생성기를 사용할 것이다.먼저 Meta Box>Custom Fields>Add New 로 이동합니다.
다음은 왼쪽 열에 필요한 필드를 오른쪽의 필드 부분으로 드래그하기만 하면 됩니다.다음은 호텔 소개 페이지를 위한 사용자 정의 필드와 하위 필드입니다.
구체적으로 각 필드에 해당하는 다음 필드 유형을 선택했습니다.
Field labelField Type 호텔 이미지 고급 주소 Text Area MapOpen Street Map 숙박 유형 체크 상자 목록 시설 체크 상자 목록 도시 중심 TextRoomGroupRoom 이름 TextRoom 이미지 고급 방 구역 TextNumber of AdultsNumber of ChildrenNumber Room PriceNumber Room 시설 체크 상자 목록 서명 날짜 우리의 마지막 방 번호
참고 각 필드에 레이블과 ID를 입력하고 기억해야 합니다.다음 단계에서 우리는 이 ID들을 코드에 삽입할 것이다.
또한 다음과 같은 특수 영역에 유의하십시오.
확인란 목록 필드: 확인란에 다음 구문을 사용하여 한 줄에 각 옵션을 입력합니다.
ID-of-choice
: 옵션 이름주소 필드: 백엔드에 호텔 주소를 입력하는 데 사용됩니다.
지도 필드: 위의 주소 필드의 필드 ID로 주소 필드 상자를 작성하여 앞의 지도에 호텔 위치를 표시합니다.
방 그룹 필드는 호텔 방의 모든 정보를 포함하는 그룹이다. 예를 들어 방 이름, 방 이미지, 방 면적, 성인 수, 어린이 수, 방 가격, 방 시설, 입주 날짜 등이다.이 필드를 방 필드로 드래그하면 방 필드의 하위 필드가 됩니다.
필드를 작성한 후 설정 탭으로 이동하여 게시물 유형을 호텔로 선택합니다.
3단계: 호텔별 정보 입력
1단계에서 게시물 유형을 작성하면 호텔이라는 새 메뉴가 관리 대시보드에 표시됩니다.이 메뉴로 이동하여 호텔을 추가하거나 필요한 호텔 정보를 입력하십시오.
2단계에서 작성한 사용자 정의 필드는 호텔마다 표시됩니다.이제 다음 필드의 정보만 입력하십시오.
참고 백엔드의 관리자 계정에서 정보를 입력하는 단계입니다.일반적으로 온라인 여행사 사이트에는 호텔 소유자가 호텔 정보를 전면에 추가하거나 편집할 수 있는 페이지가 있다.이를 위해서는 다음 단계에서 this article 를 따를 수 있습니다.이후 호텔 소유자는 전방에 계정을 만들고 로그인하며 사용 가능한 형식으로 호텔 정보를 제출할 수 있다.
4단계: 호텔 정보 전면에 표시
이 단계에서 저는 Justread 테마를 사용했습니다.테마와 상관없이 편집하기 위해 child theme 을 만들 것입니다. (무료 Justread 테마 here 를 다운로드해서 시도해 보십시오.
우선,
single-hotel.php
라는 파일을 만들고, 다음 내용으로 single.php
파일을 덮어씁니다./**\
*\
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post\
*\
Justread 회사\
*/
\
\
<div id="primary" class="content-area">
<div id="primary" class="content-area">
<main id="main" class="site-main">\
<?php\
while ( have_posts() ) : the_post();\
get_template_part( 'template-parts/content', 'single-hotel' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :\
comments_template();\
endif;\
endwhile; // End of the loop.\
?>\
</main><!-- #main -->\
</div><!-- #primary -->\
get_footer();설명:
<?php dynamic_sidebar( 'sidebar-single-hotel' ); ?>
: 이 코드는 한 호텔 페이지에 단독 사이드바를 만들고 OTA 사이트의 왼쪽으로 이동하는 데 사용됩니다.get_template_part( 'template-parts/content', 'single-hotel' )
: 이 코드는 content-single-hotel.php
파일이 아니라 content.php
파일을 사용하여 호텔 페이지의 내용을 변경합니다.content-single-hotel.php
파일 here 의 내용을 찾을 수 있습니다.다음은 CSS를 사용하여 표시 필드의 스타일을 설정하여 더욱 아름답게 해야 합니다.내
style.css
파일에서 단일 호텔 페이지 스타일을 설정하는 데 사용되는 내용은 here 이다.다음은 저희 사이트의 단일 호텔 페이지에 표시된 호텔 정보입니다.
다 끝났어!우리는 이미 모든 호텔 페이지에 호텔 정보를 표시하는 작업을 끝냈다.
마지막 말
다음 글은 호텔 파일 페이지와 호텔 페이지에서 예약할 방을 검색하는 필터를 만들 것입니다.그러니 우리를 따라오는 것을 잊지 마라!질문이나 생각이 있으시면 언제든지 논평 부분에서 저희와 공유해 주십시오.
--- --- ---
출판물은 Meta Box에 있습니다.
Reference
이 문제에 관하여(가입과 유사한 OTA 웹 사이트를 만듭니다.meta Box가 있는 com - P1: 호텔 객실 소개 페이지 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/wpmetabox/create-an-ota-website-like-booking-com-with-meta-box-p1-create-a-page-to-introduce-hotel-rooms-5493텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)