DIY WP #46 front-page.php code cleanup

안녕하세요 지난 동영상까지 프런트페이지와 네비게이션 편집을 마쳤고 몇몇 페이지를 추가해서 제대로 작동이 되는지 확인했습니다

이번 시간에는 front-pagephp 코드 정리를 해보도록 하겠습니다 그 전에 headerphp부터 먼저 하는 게 좋겠네요 우선 여기 주석처리한 것들은 필요가 없으니까 삭제해 주시고요

그 다음 모달 컨택트부터 시작하겠습니다 예 template-parts 디렉토리에 뉴파일을 클릭하고 이름에는 acf-modalcontact라고 하겠습니다 그리고 여기에서 여기까지 선택한 다음 컷하고 여기에 붙여넣기합니다 줄정리하구요 저장하고 여기 아래에 php get_template_part 에 소괄호 작은 따옴표 template-parts에 슬래쉬 acf 콤마 modalcontact라고 합니다

일단 저장합니다 브라우저로 가서 리프레쉬하고 문의를 클릭하면 역시 잘 되구요 그럼 이제 headerphp는 더 손댈 게 없을 것 같습니다 네비게이션은 그냥 그대로 두어도 되겠네요

headerphp는 닫고 이제 front-pagephp를 열고 쭉 내려 가면 여기 토글 콜랩스가 있는데요 template-parts에 새 파일을 클릭하고 acf-collapseContentphp라고 하죠

그 다음 여기에서 여기까지 컷하고 여기에 붙여 넣기를 합니다 여기에 있는 이 두 개의 변수가 필요하겠죠 그게 coll_title과 coll_body네요 이 두 줄을 컷하고 여기 제일 위에 php라고 하고 붙여넣기합니다 세이브하구요

그 다음 잘라내기한 부분에 php get_template_part 함수에 소괄호 template-parts 슬래쉬 acf 콤마 collapseContent라고 해 줍니다 세이브 다시 브라우저로 가서 리프레쉬하고 이 버튼을 누르면 제대로 됩니다 다음은 메인 슬라이더 부분인데 새 파일에 acf-frontSlide

php라고 하고 슬라이드부분을컷 한 다음 붙여넣기 줄 정리해줍니다 그리고 상단 슬라이드 변수를 모두 컷하고 php 다음 붙여넣기합니다 세이브합니다 다시 슬라이드가 들어가는 부분에 php get_template_part 소괄호 template-parts 디렉토리에 acf 콤마 이름은 frontSlide

세이브하고 브라우저로 가서 리프레쉬하면 네 역시 잘 됩니다 그 다음은 페이지 아이템 박스들이죠 새 파일에 이름은 cotent-pageItemBoxphp 라고 하겠습니다 여기 페이지 아이템 박스에서 끝까지를 컷한 다음 붙여넣기 해주십니다

예 그리고 여기에 php get_template_part에 template-parts 디렉토리에 content 콤마 pageItemBox라고 해줍니다 이 br 태그 두개가 좀 거슬리네요 이것도 같이 짤라 내서 front Slidephp 밑에 붙여넣기를 하시겠습니다 그렇게 하시고 front-page

php 는 저장하고 그 다음 여기 content-pageItemBoxphp에 사용된 커스텀필드 변수들을 모두 컷한 다음 여기 제일 위에 php 하고 붙여넣기 해줍니다 저장하구요 이 파일도 저장해주세요 다음 브라우저에 리프레쉬하고 보시면 역시 마찬가지로 에러없이 제대로 작동되는 것을 볼 수 있겠습니다

자 그 다음은 사이드 섹션입니다 그 중에 이 로고 박스를 새 파일 클릭하고 acf-logophp라고 합니다 이 부분들을 컷하고, 새 파일에 붙여 넣기를 하세요 줄정리 해주시죠

그리고 frontpagephp로 가서요 이 로고 변수를 컷하고 다시 로고 파일에 php 한 다음 이렇게 한 줄로 붙여넣기 해줍니다 자 세이브하고, 프런트 페이지 파일에서 php get_template_part 소괄호 template-parts 디렉토리에 acf 콤마 logo라고 해줍니다 세미콜론

세이브 브라우저로 가서 리프레쉬하면 네 뭐 변함없이 잘 됩니다 그 다음 여기 트리거 부분이죠 토글 트리거 부분입니다 마찬가지로 뉴 파일 클릭하고 acf- acf-collapseTrigger

php라고 합니다 이제 여기에서 여기 까지를 컷 한다음 붙여 넣기를 해주시고요 줄 정리해줍니다 php라고 미리 적어두겠습니다 그 다음 front-page

php에 트리거 타이틀과 데스크 버튼 부분을 컷하고 붙여넣기 해줍니다 세이브하구요 그 다음에 여기에 php get_template_part 소괄호 template-parts 디렉토리에 acf 콤마 collapseTrigger라고 적어 줍니다 세이브합니다 브라우저로 가서 리프레쉬해도 역시 제대로 됩니다

자 계속할께요 이번에는 인포메이션 부분이죠 뉴파일에 acf-infophp라고 합니다

프런트 페이지에서 인포 섹션이 여기 까지이지요 지정하고 컷한 다음에 여기다가 붙여 넣기를 하시고 줄정리 하고 제일 위에 php라고 만들어 둡니다front page에서 인포 부분의 변수들을 모두 컷합니다 그리고 여기에 붙여넣기 하고 그리고 저장해주세요 다시 front-page

php로 가서 php get_template_part에 template-parts에 acf 콤마 info 세미콜론 세이브하고 브라우저 리프레쉬해도 역시 정상적으로 잘 되구요 그 다음에는 레저베이션에 대한 박스 아이템 역시도 새파일을 만들고 acf-reservphp라고 해줍니다 네

이 부분을 컷한 다음 붙여넣기 제일 위에 php 미리 만들어두구요 front-page로 가서 레저베이션 acf 의 변수들을 컷한 다음 여기에 붙여넣기 합니다 세이브 그리고 지금 여기죠? php get_template_part 소괄호 template-parts 디렉토리에 acf 콤마 resev

그 다음 이제 소셜 네트워크 부분이네요 여기까지 세이브하시구요 브라우저 리프레쉬합니다 역시 레저베이션 부분 변함없구요 다시 front-page

php로 가서 이제 여기 있는 소셜네트워크 부분도 새파일 클릭하고 acf-socialphp라고 합니다 여기서 여끼까지 이 컷 하신다음에 붙여 넣기를 하시고 줄정리 한 다음 제일 위에 php라고 적어 둡니다 프런트 페이지에서 남은 4개의 변수들을 컷한 다음 여기에 붙여넣기 하고 저장합니다 front-page

php로 가서 php get_template_part에 template-parts 디렉토리 acf 콤마 social이라고 적고 세이브합니다 자 됐습니다 브라우저로 가서 리프레쉬 제대로 됩니다 이제 마무리로 줄정리 좀 해 주겠습니다

이 주석은 삭제합니다 프런트 슬라이드와 그 아래 페이지 아이템 부분에서 php 중복은 없애구요 그 다음 사이드 섹션에서도 닫히는 php와 다음 줄의 열리는 php는 없애줍니다 이렇게 정렬을 하구요 그 아래 코드들도 이렇게 해줍니다

다 됐죠 예 세이브합니다 꽤 긴 코드들이었는데 지금 대략 약 40줄 정도로 정리했네요 브라우저에서 리프레쉬합니다 에러가 있는지 확인합니다

괜찮습니다 이렇게 하면 프런트 페이지 코딩과 정리는 모두 다 됐습니다 프런트페이지가 완성되니까 조금씩 홈페이지 모습이 되어가는 것 같습니다 이번 동영상은 여기에서 마치구요 다음 동영상에는 페이지 템플릿 커스텀 페이지 코딩을 해보겠습니다 수고하셨습니다

What’s the Difference Between WordPress.com and WordPress.org?

안녕하세요, WinningWP의 Topher입니다 이 영상에서는 "wordpress

com과 wordpressorg의 차이점은 무엇이며, 어느 것이 나에게 더 적합할까?"라는 질문에 관해 논의해볼 것입니다 이것은 놀랍게도 매우 흔한 질문이며, 우리 모두가 협력하여 해결해야하는 과제이기도 합니다 하지만 그때까지는, 여러분들이 보다 적절한 선택을 할 수 있도록 제가 여러분들을 도울 것입니다 그럼 이 두가지의 차이점은 무엇이며, 왜 그것이 중요할까요? WordPress

com과 WordPressorg의 차이점 한 가지는 이것들이 대상으로 하는 시장이 서로 다르다는 것입니다 둘은 서로 완전히 다른 목적을 가지고 있습니다 이 둘은 비용 면에서 차이가 있습니다 이것은 그들이 같은 것을 서로 다른 가격에 제공한다는 의미가 아닙니다

그들은 서로 다른 것을 다른 가격에 제공합니다 한쪽에서는 어떤 것이 무료일 수 있지만, 다른 쪽에서는 요금이 부과될 수 있고, 그 반대의 경우도 역시 일어날 수 있습니다 또한 이 둘은 사용 용이성에서도 차이가 납니다 WordPresscom은 사용하기 쉽도록 디자인된 반면, WordPress

org의 디자인에는 딱히 그런 목적이 보이지 않는 대신, 더 많은 권한을 제공하도록 설계되었습니다 그리고 이 둘은 다수의 서비스들을 제공하는데요 이들은 각각 서로가 제공하지 않는 것들을 제공하므로, 따라서 여러분이 찾고자 하는 것이 무엇인지 알려면 두 가지를 동시에 살펴보아야 할 것입니다 그러면 어떤 것이 당신에게 더 적합할 지 알아봅시다 이것은 사실 꽤 간단한 문제입니다

WordPresscom는 서비스이며, WordPressorg는 도구입니다 그래서 com은 DIY, 즉 아주 작은 재량만이 허용되는 서비스로, 즉, IKEA와 같은 것입니다

com에서는 양식 몇 개를 작성하고, 이름을 써넣고, 로그에 제목을 붙이는 등 몇 가지만 완료한다면, 10분 후에는 여러분의 블로그가 뚝딱 만들어지게 됩니다! 그에 비하면 org는 "홈 디포" 같은 곳에 가깝습니다 이곳은 여러분이 원하는 모든 원자재를 기꺼이 제공하며, 그것들로 여러분은 집에 가서 이제껏 그 누구도 보지 못한 엄청난 것을 만들어내거나, 아니면 정반대로 차마 봐주기 힘든 것을 만들 수도 있습니다 그러니까 "홈 디포"는 여러분이 뭔가를 배울 수 있게 합니다

엄청나게 멋진 무언가를 만들 수도 있다는 것이지요 이 아이디어를 조금 더 확장해보자면, WordPresscom은 제한된 것을 제공하는 서비스입니다 이 예시에서 com은 협탁을 만드는 것과 같습니다

여러분은 그것에 페인트칠을 할 수도 있고, 다리를 조금 자를 수도 있지만, 결국 결과적으로 여러분이 갖는 것은 협탁일 뿐입니다 반면에 org를 사용하면 무엇이든 만들 수 있습니다 이것은 아주 강력하며 매우 탄력적으로 운용 가능한 도구입니다 그러니까 서비스로서의 WordPresscom은 회사가 소유하며, 자동화되어 있습니다

여기서 그들은 WordPress와 관련한 사업을 하는 것입니다 그들은 WordPress의 소유주가 아니라, 당신이 그러하듯 단순히 도구로서 이것을 사용하는 것이며, 그렇게 만든 것으로 서비스를 제공합니다 도구로서의 WordPressorg는 오픈 소스 제품인 WordPress 자체를 제공합니다 이것은 오픈 소스이기 때문에, 세상 모든 사람들이 무료로 이용할 수 있습니다

공짜인 것이 다가 아닙니다 여러분은 실제로 이것을 소유할 수도 있습니다 라이선스에 따라 지구상의 모든 인간은 WordPress를 소유합니다 WordPresscom은 또한 호스트가 있는 플랫폼으로써, 당신을 위해 모든 것을 처리해줍니다

이것은 집 대신 콘도를 소유하는 것과 유사합니다 여러분은 잔디를 깎을 필요도, 꽃에 물을 주거나, 지붕에 대해 걱정할 필요도 없지만, 그럼에도 여전히 벽 정도는 스스로 칠할 수 있어야 합니다 반면에 org는 자체 호스팅을 따릅니다 즉, 여러분은 자신만의 서버가 필요하며, 그 대신 그것을 바꿀 때 벽에 페인트칠하는 것보다 더 많은 것을 할 수 있게 됩니다

원한다면 완전히 때려 부수는 것도 가능합니다! WordPresscom은 고정된 시스템입니다 앞서 이것을 협탁에 비유했었죠 이것은 제한된 것들을 제공합니다 그러니까 그들이 제공하는 것들은 훌륭하고 멋질 것이며, 특히나 이것들이 여러분에게 필요한 것일 때는 환상적일 것입니다! 하지만 여러분이 원하는 게 아니라면, 아무리 멋진 것이라도 소용이 없을 것입니다

반면에 org에서는 완전히 자유로운 맞춤제작이 가능합니다 WordPressorg에서 내려받은 WordPress로 여러분은 어떤 것이든 할 수 있습니다 WordPress

com은 어떻게든 굴러가게 되어있습니다 이 말은 즉슨, 여러분이 블로그를 잘 운영한다면 그것을 사용하는 것은 여러분일테지만, 만약에 잘 안되는 한이 있더라도, 다른 사람들이 그것을 다시 사용할 수 있습니다 콘도나 아파트를 소유하는 것과 비슷하지요 집의 배관이 파손되면, 다른 누군가가 와서 그것을 고쳐주는 셈입니다 반면

org에서는 그것을 완전히 망가뜨릴 자유도, 또한 그것을 고칠 책임도 모두 여러분에게 달려 있습니다 혹은 다른 이를 고용해도 됩니다 그러니까, 이것은 자신 소유의 집에 배관공을 고용하는 것과 같습니다 WordPresscom에는 관련 온라인 커뮤니티가 존재합니다

여기서 잠깐 구경할 기회를 드릴게요 일단 여러분이 WordPresscom에 로그인하면, 여러분의 계정에서 다음 페이지를 보실 수 있을 겁니다 이 페이지는 자신이 구독하고 있는 다른 블로그의 게시물을 보여줍니다 그래서 저는 NASA나 Image Of The Day, Boing Boing, ThinkGeek 등을 구독할 수 있으며, 그들도 자유롭게 제 블로그를 구독하거나 제가 올린 게시물을 볼 수 있습니다

제 친구들도 저를 구독하거나, 제가 친구들을 구독할 수도 있습니다 WordPresscom에 로그인하면 댓글을 달 수 있다는 사실은 아마 여러분께서도 익숙한 부분일 것입니다 다른 사람의 사이트에서 댓글을 달 때, 여러분은 따로로 로그인을 하거나 모든 정보를 기입할 필요가 없습니다 이미 시스템에 로그인되어 있는 상태이기 때문에, 사람들은 더욱 쉽게 다른 이들의 사이트를 방문하고, 댓글을 달고, 커뮤니티를 형성할 수 있습니다

WordPressorg는 WordPress의 설치를 지원합니다 앞서 제가 비유했듯이, 여러분이 배관을 고장냈다면, 배관공을 불러 그것을 고치게 해야할 것입니다 하지만 WordPressorg 커뮤니티의 방식에 따르면 공동체 내의 모든 배관공들은 기꺼이 여러분을 무료로 도우려고 할 것입니다

다음을 한 번 봅시다 이것은 WordPressorg의 페이지이고요, 바로 여기에 '지원'이 있습니다 이것을 클릭하면 포럼과 문서 자료, 안내서에 관한 섹션이 나옵니다 그리고 포럼에는 여러분과 같은 사람들, 즉, 지금 여러분이 겪고 있는 것을 이미 겪어봤던 사람들이 많이 있으며, 그들은 문제를 해결하는 방법에 대해 기꺼이 조언을 주려고 할 것입니다

아주 멋진 시스템이죠! WordPresscom에는 뉴스피드란 것이 있습니다 여기서 뉴스라는 단어의 의미는 약간 막연하게 쓰이는데, 왜냐하면 다른 이들의 블로그 포스트에 올라오는 뉴스라는 것들이 때로는 정보를 담고 있기도 하지만, 때로는 그저 고양이 사진일 때도 있기 때문입니다 여기서 저는 '탐색(discover)'이라고 불리는 링크를 보여드릴까 하는데, 이것들은 사람들이 블로그를 읽고 관심있는 것들을 찾아 그와 같은 것들을 받아보는 과정이 자동으로 이루어지도록 기획된 블로그 게시물입니다 이것은 여러분이 쓸만한 것을 찾아 쓰레기통을 뒤지듯 인터넷을 돌아다닐 필요가 없게 하므로, 여러분의 시간을 절약해주는 꽤 좋은 기능입니다

org는 문서를 제공하는데, com의 문서 자료들이 그들의 서비스 사용방법에 관한 자료들만을 제공한다면, org는 WordPress의 모든 것에 관한 매우 심도 깊은 문서 자료들을 제공합니다 만약 여러분이 자료를 조사하고자 한다면,

org에서는 WordPress의 사용방법에 관한 여러 글들과 더불어, WordPress의 사용방법에 대해서 챕터별로 담은 안내서도 찾을 수 있을 것입니다 이것은 '반스앤노블'에서 전자책을 구하는 것과 비슷한데, 다만 여러분은 당신과 같은 사람들을 쓴 글들을 모두 무료로 볼 수 있다는 점에서 차이가 있습니다 그 중에는 제가 쓴 글글도 있겠지요 한편 WordPresscom에는 무료 상품부터 월 $24

92에 달하는 요금제까지 제공하고 있으며, 또한 추가적인 기능이나 테마, 고유 도메인 이름 등과 같은 것들을 따로 구매할 수 있지만, 무료 모델도 분명히 있으며 유료 못지않게 훌륭한 편입니다 반면 org에서는 수백, 수천 달러까지 무료로 제공되며, 개중에는 무료로 사용가능한 도구인 org를 이용하여 수백만 달러를 버는 사람들도 있습니다com은 DIY 블로거들에게 적합하지만, 자신만의 웹사이트를 개설하고 맞춤제작 테마를 만들고 색상을 변경하는 등 시험삼아 이것저것 해보기를 원하는 사람들에겐 어울리지 않을 수 있습니다 만약 단지 블로그만을 원한다면 com은 좋은 선택이지만 만약 인터넷을 더욱 폭넓게 활용하고 싶다면 org가 더 훌륭한 선택이 될 것입니다 그렇다면

com을 사용하는 사람이 웹이나 HTML 기술이 부족하다고 가정해봅시다 만약 여러분이 HTML이 무엇인지 잘 모른다면, com이 더 나을 수 있습니다 제한된 예산 때문에 초고속 서버를 장만하거나, 커스터마이징을 위해 개발자에게 많은 돈을 쓰고 싶지 않은 사람이라면, 또 단지 일회성으로 블로그를 열고자 하는, 예를 들어 차를 팔거나 결혼과 같은 큰 기념일, 가족 행사 등으로 한 번 사용하고 아무도 다시 찾지 않아 결국 버리게 될 그런 종류의 블로그를 원하는 이들에게는 com이 더 적합할 것입니다

또 신속한 해결책을 원하는 사람들에게도 몇 분 만에 블로그를 개설할 수 있는 com을 추천합니다 wordpresscom은 꽤 큰 용량의 하드 드라이브를 제공하므로, 음악이나 영상을 업로드하기 좋기 때문에 지역의 예술가나 음악가에게도도 좋은 선택이 될 것입니다 그리고

com은 자기가 하고 싶은 말을 확실히 전달하고자 하는 모든 이들에게 적합할 것입니다 만약 당신이 뭔가 멋진 것을 인터넷에 남기고 싶어하는, 소규모 사업으로 저렴하게 웹사이트를 운영하고자 하는 블로거라면 org가 더 낫습니다 수익 창출 콘텐츠를 위해서는 후원자나 광고가 필요한데, 이런 경우 com을 사용할 수 없기 때문입니다

또한 사이트의 외형이나 전체적인 느낌을 충분히 제어할 수 있어야 하는 출판업자나, 사업적으로 콘텐츠를 소유하고 싶어하는 이들에게도 org가 더 좋습니다 WordPress에는 몇몇 매우 훌륭한 전자상거래 도구들이 있는데, 이것들은 com에서 실행할 수 없으며, 전자상거래를 하려면 org를 통해 직접 WordPress로 설정을 해야 합니다

비영리단체나 교회의 경우도 비슷한 이유로 org이 적합한데, 왜냐하면 WordPress에서 쓸 수 있는 아주 우수한 기부 시스템이 com에서는 작동되지 않기 때문입니다 WordPresscom에서 온라인 사업을 하려면 당신이 어떻게 사이트를 사용할 것인지에 대해서 밝히는 사용 계약서에 무조건 서명해야 하는데, 때때로 사업자들은 어느 종류의 계약에도 관련되고 싶지 않아하는 경우가 있습니다

사업에서는 심지어 그것이 좋은 계약일 때도 다른 계약에 얽히고 싶지 않아하는 경우가 종종 발생합니다 그럴 때는 그저 org에서 다운받은 WordPress로 자신 소유의 사이트를 설정하기만 하면 됩니다 그리고 마지막으로 완전한 사용자 맞춤 해결책을 원하시는 분, 남들과 다른 것을 추구하거나 블로그가 아닌 다른 것을 원하는 분들이시라면, org을 통해 WordPress를 사용해보시길 바랍니다

마지막으로 요약하자면, com은 기술적으로 지식이 부족하고 또 그 기술을 활용하고 싶지도 않은, 단순히 인터넷에 게시물을 올리고 싶은 사람에게 적합하며, 반면에 org는 요구사항이 더욱 구체적이며 인터넷에 새로운 것을 창조하고 또 배우고 싶은 사람, 또는 사업을 하거나 기부금을 모으는 이들에게 더 알맞습니다 지금까지 들어주셔서 감사드리며, 여러분이 com이나

org을 선택하는 데 있어서 제 영상이 도움이 되었으면 합니다