일반적으로 기존의 무료 템플릿 만 조정하고 색상과 글꼴을 변경합니다. 문제는 이미 Joomla 페이지가 온라인 상태 일 때 템플릿 CSS를 변경하는 가장 쉬운 방법은 무엇입니까?
현재 Chrome 개발 도구 를 사용하여 미리보기를위한 특정 스타일을 찾고 조정하고 있습니다. 마음에 들면 관리 영역의 온라인 편집기에서 템플릿의 CSS 파일을 직접 조정합니다.
처음 시작했을 때 콘텐츠가 없었기 때문에 Joomla와 함께 로컬 웹 서버를 사용하여 CSS와 PHP 코드를 작성하는 데 적절한 IDE를 사용할 수 있다는 이점이있었습니다. 콘텐츠가 이미 있으므로 변경 한 내용이 콘텐츠에 어떤 영향을 미치는지 확인하고 싶습니다.
이것이 기본적인 질문이라는 것을 알고 있지만 기존 사이트의 디자인을 조정하려는 사람이 선호하는 워크 플로우가 있습니까?
답변:
Akeeba를 사용하여 라이브 사이트를 복제하고 로컬로 설치 한 다음 필요에 따라 조정하십시오. SSH / FTP를 마치면 변경된 파일을 다시 라이브 사이트로 보냅니다.
라이브 사이트에서“조정”하는 것이 부적절한 이유에는 여러 가지가 있습니다…
초점이 사용의 용이성, 자동화 또는 비용에 따라 여기에 몇 가지 옵션이 있습니다.
configuration.php호스트가 원격 액세스를 지원하는 경우 로컬 설치로 이전에 수행 한 작업을 정확히 수행하지만 일단 설치 한 후에 로컬 원격 MySQL 데이터베이스를 사용하도록 로컬 Joomla 설치를 변경하십시오 . 조심하십시오-DB 변경 사항이 라이브로 롤오버됩니다 ...
extplorer 와 같은 구성 요소를 사용 하고 브라우저에서 직접 템플릿 파일을 편집하고 다른 탭을 열어 사이트를 표시하고 여전히 Chrome의 개발 도구를 사용합니다. extplorer는 코드 색상을 특징으로하며 작은 변경을 신속하게 수행하는 데 좋습니다.
버전 제어 시스템을 사용하여 변경 사항을 푸시하십시오. 예를 들어, 선택한 IDE를 사용하여 로컬 Joomla 설치에서 템플리트를 저장소의 템플리트로 개발하십시오. 완료되면 라이브 사이트에 변경 사항을 적용하십시오. 커미트 후 후크를 사용하여 해당 변경 사항을 작업 버전으로 체크 아웃하십시오. 설정하기가 더 복잡하지만 실수를하면 항상 이전 템플릿 버전으로 롤백 할 수 있습니다. 원격 MySQL에 추가하여 로컬 및 라이브에서 데이터 일관성을 보장하십시오.
적절한 템플릿 / 템플릿 프레임 워크를 지불하십시오 . 회사에서는 YooTheme 템플릿 을 사용 합니다. 이 템플릿 프레임 워크에는 'Customizr'이라는 기능이 있습니다.이 기능은 기본적으로 왼쪽에 수백 개의 CSS 변수 (잘, LESS 변수)가 있고 오른쪽에 라이브 미리보기가있는 2 개의 창입니다. 이러한 변수는 거터 패딩에서 메뉴 항목 텍스트 그림자 및 그 사이의 모든 요소에 이르기까지 템플릿의 모든 요소를 충분히 제어합니다. 미리보기에서 변경 사항이 즉시 적용되며 다양한 '스타일'을 정의하여 다양한 변수 구성으로 재생할 수 있습니다. 이 모든 것이 다른 템플릿 프레임 워크가 매우 유사한 기능을 가지고 있다고 확신합니다.
NB : 나는 사용자 이외의 extplorer 나 YooTheme과의 관계가 없습니다.
CSS 변경 사항 만 있다면 Chrome 개발 도구에서 미리보기를 계속하고 Cloud9 또는 ShiftEdit 와 같은 온라인 개발 환경을 사용하여 FTP를 통해 서버에 직접 연결하고 적절한 IDE를 사용하여 라이브 사이트를 조정할 수 있습니다 로컬에서 호스팅했을 때와 비슷합니다.
그러나 사이트를 손상시킬 수있는 더 큰 변경에는이 방법을 권장하지 않습니다 (몇 년 전에 어려운 방법을 배웠습니다). 이를 위해 로컬 서버 (또는 koding.com 의 무료 VM )를 설정 하고 Akeeba 를 사용하여 사이트를 복제하고 Git *를 사용하여 테스트 를 마친 라이브 사이트에 변경 사항을 적용하는 것이 좋습니다.
* GitHub 에서 코드를 공개하지 않으려면 BitBucket을 사용하는 것이 좋습니다 .
내가 사용한 한 가지 방법은 내 자신의 CSS 파일을 템플릿 index.php 파일에 추가하는 것입니다. 사용자 인 경우에만 추가 할 수 있습니다.
이것을 확장하는 방법은 사용자 인 경우 CSS 파일을 추가하는 간단한 플러그인을 작성하는 것입니다. 다음 업데이트로 대체 될 수있는 템플릿에서 직접 변경하지 않도록 기본 관리 템플릿을 변경하는 데 사용했습니다.
뭔가 ...
class plgSystemBB extends JPlugin {
public function onBeforeCompileHead() {
if (JFactory::getUser()->username == 'my.login.name.goes.here')
{
JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
}
if(!JFactory::getApplication()->isAdmin()){
return;
}
JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}
템플릿 변경 사항을 미리 보려면 템플릿을 복제하고 복제본을 변경하면됩니다. 이러한 변경 사항을 보려면 "? template = test"를 URL에 추가하십시오.이 경우 템플리트가 대체됩니다. "test"를 복제에 사용하기로 결정한 이름으로 바꾸십시오.
스타일 만이 아니라 전체 템플릿을 복제해야합니다. 관리 GUI에서 스타일과 템플릿을 모두 복제 할 수 있습니다.
URL의 스타일을 재정의하는 것이 가능하지 않다고 생각합니다. [PW : J3에서는 URL의 스타일을 재정의 할 수 있다는 것을 알았습니다. 방법 3을 참조하십시오.]
방법 2와 유사하지만 스타일이 있습니다. "테스트"스타일을 사용하고 테스트 스타일 시트를 포함하도록 기본 템플리트를 수정하십시오. URL에서 스타일을 재정의하려면? templateStyle =을 추가합니다. 여기서 템플릿 식별자 (예 : 숫자)입니다.